useEffect 副作用钩子
最后更新：2026-10-28
useEffect 副作用钩子
useEffect 把「渲染之外的事」——数据请求、订阅、定时器、直接操作 DOM——收进一个声明式入口。它在渲染完成后执行，并可通过返回的清理函数在下次执行前或卸载时收尾。
| 分组 | 副作用与性能 |
|---|---|
| 类型 | Hook |
| 引入版本 | React 16.8 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
useEffect(() => {
// 副作用逻辑
return () => { /* 清理 */ }
}, [deps]) // [] 仅挂载时；[a, b] 依赖变化时；不传则每次渲染后⚙️ 参数
| effect 函数 | 副作用主体，渲染完成后异步执行。可返回一个清理函数。 |
|---|---|
| deps（依赖数组，可选） | 控制执行时机：[] 只在挂载后跑一次；[a, b] 任一变化时重跑；省略则每次渲染后都跑。 |
返回值：无返回值。需要收尾时，在 effect 函数里 return 一个清理函数。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
页面显示「已运行 0 秒」，每秒自动加 1；组件卸载时定时器被清理，不会内存泄漏。💡 要点
💡 提示 凡是 setInterval / addEventListener / 订阅，几乎都要配清理函数——否则组件卸载后仍在跑。
⚠️ 注意 依赖数组漏写对象/函数引用是最常见 bug 源：引用每次渲染都变，effect 每帧重跑甚至死循环。
ℹ️ 说明 [] 表示「只跟挂载有关」——ESLint 的 exhaustive-deps 警告要逐条想清楚再压掉。
🏷️ 副作用与性能相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q useEffect 和生命周期函数是什么关系？
A
Q 为什么我的 useEffect 无限循环？
A
Q 清理函数什么时候执行？
A
