useEffect 是什么，它何时运行？

Question

Accepted Answer

`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 规则可以帮助）。