DEV Community
·
useEffect：让你不断猜测（并刷新）的钩子
💡
原文英文，约900词，阅读约需4分钟。
📝
内容提要
useEffect是React中处理副作用的常用钩子。未传递依赖数组时，回调函数不会无限执行。清理函数在组件卸载前执行，以确保移除事件监听器。子组件的副作用优先于父组件执行，执行顺序依赖于注册顺序，状态更新时清理函数按逆序执行。
🎯
关键要点
- useEffect是React中处理副作用的常用钩子。
- 未传递依赖数组时，回调函数不会无限执行。
- 清理函数在组件卸载前执行，以确保移除事件监听器。
- 子组件的副作用优先于父组件执行，以确保子组件的布局或行为先被处理。
- 状态更新时，清理函数按逆序执行，先执行子组件的清理函数，再执行父组件的清理函数。
❓
延伸问答
useEffect的主要功能是什么？
useEffect是React中处理副作用的常用钩子。
如果不传递依赖数组，useEffect会发生什么？
未传递依赖数组时，回调函数不会无限执行，而是在每次渲染时执行。
useEffect中的清理函数有什么作用？
清理函数在组件卸载前执行，以确保移除事件监听器。
子组件和父组件的副作用执行顺序是怎样的？
子组件的副作用优先于父组件执行，以确保子组件的布局或行为先被处理。
useEffect的清理函数在状态更新时如何执行？
状态更新时，清理函数按逆序执行，先执行子组件的清理函数，再执行父组件的清理函数。
useEffect的执行顺序与注册顺序有什么关系？
执行顺序依赖于注册顺序，先注册的副作用先执行。
➡️
