useEffect 运行副作用 — 在 React 渲染之外执行的工作,如数据获取、订阅、定时器或手动 DOM 更新。它在组件渲染之后运行,将副作用保持在 render body 之外(render 必须保持纯净)。
Dependency array 控制运行时机
jsx
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]); // ← dependency array
[count]→ 在首次渲染后以及每当count改变时运行。[](空) → 在挂载后运行一次(适合一次性设置)。- 省略 → 在每次渲染后运行(很少是你想要的)。
清理:返回一个函数
如果 effect 设置了需要清理的内容,返回一个清理函数。React 会在下一个 effect 运行前以及组件卸载时调用它:
jsx
useEffect(() => {
const id = setInterval(() => setN(n => n + 1), 1000);
return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
为什么这很重要
没有清理函数,每次重新运行都会添加另一个计时器/订阅,但永远不会删除旧的 — 这是典型的内存泄漏。[dep] effect 的生命周期是:运行 effect → (dep 改变) → 运行清理 → 再次运行 effect。
提示: 不要对可以在渲染期间计算的东西使用 effects(改为派生值),并在 dependency array 中包含 effect 读取的每个值(react-hooks/exhaustive-deps lint 规则可以帮助)。
