Dependency Array 依赖数组
最后更新：2026-10-28
Dependency Array 依赖数组
依赖数组告诉 effect「为谁而跑」：空数组只跑一次，列出变量则在任一变化时重跑。心智模型是「effect 随依赖同步」——effect 里读取的响应式值，就应如实出现在数组里。
| 分组 | 副作用与性能 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
useEffect(fn) // 每次渲染后都跑
useEffect(fn, []) // 仅挂载后跑一次
useEffect(fn, [a]) // a 变化时跑（Object.is 比较）返回值：无返回值，作为编码模式使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
点不同用户按钮，先显示「加载中…」再变为对应用户名；快速连点也不会串数据（旧定时器被清理）。💡 要点
💡 提示 依赖按 Object.is 比较：对象/函数每次渲染引用都变，等于依赖「永远在变」。
⚠️ 注意 故意漏写依赖能换来「少跑几次」，代价是读到过期闭包——想清楚再压 ESLint 的 exhaustive-deps 警告。
ℹ️ 说明 「挂载只跑一次」的直觉常常出错：只要 effect 用到了会变的值，就应如实列出依赖。
🏷️ 副作用与性能相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 依赖数组里放对象为什么总是重跑？
A 每次渲染对象都是新引用，Object.is 不相等。用 useMemo 稳定引用，或改存原始值作依赖。
Q 为什么 [] 在开发模式下跑两次？
A StrictMode 故意双调用以暴露缺清理的副作用；生产环境只跑一次。
Q 怎么在某个 prop 变化时执行逻辑？
A 把它列入依赖数组，effect 内写逻辑即可；需要「跳过首次」时用 ref 记录是否已挂载。
