Effect Pitfalls Effect 常见坑
最后更新：2026-10-28
Effect Pitfalls Effect 常见坑
useEffect 的坑集中在依赖数组：漏写依赖读到旧值、在 Effect 里 setState 又被依赖触发造成死循环、依赖写成对象或函数每次都是新引用、忘记 cleanup 导致监听叠加。认清这四类问题，Effect 就安全了一大半。
| 分组 | 路由与状态管理 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
useEffect(() => {
document.title = '当前 ' + count + ' 次' // ① 用了 count 就要声明依赖
}, [count]) // ② 依赖数组：变化才重跑
useEffect(() => {
const id = setInterval(tick, 1000)
return () => clearInterval(id) // ③ 卸载时清理，防止叠加
}, [])返回值：无返回值，作为编码模式使用
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
输入过滤词后列表实时变化，Effect 执行次数只在 query 变化时 +1；下方列出漏依赖、死循环、对象依赖三大坑的后果。💡 要点
⚠️ 注意 在 Effect 里 setState 且该状态又在依赖里，是无限循环的第一大来源；先问自己「这个值能否在渲染期直接推导」。
💡 提示 对象/数组/函数依赖每次渲染都是新引用，可用 useMemo/useCallback 包裹，或把依赖收窄为原始值。
ℹ️ 说明 React 18 的 StrictMode 在开发环境会把 Effect 挂载-卸载-再挂载一遍，专门帮你暴露漏写的 cleanup。
🏷️ 路由与状态管理相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 为什么 Effect 会无限循环？
A Effect 内 setState 改了依赖里的值 → 状态变 → 重跑 Effect → 再 setState，如此往复。解决：移除该依赖、收窄依赖，或改为渲染期派生。
Q 依赖数组到底该怎么填？
A 把 Effect 内读到的所有响应式值（props、state、组件内定义的变量和函数）全部列出；eslint 的 exhaustive-deps 规则会提醒你。
Q 空数组 [] 是不是就只跑一次？
A 是「与任何值无关」的意思：挂载时跑一次、卸载时跑 cleanup。若内部读了 state，读到的永远是初始值（闭包陷阱）。
