React useEffect依赖数组为空时清理函数不执行的问题

问题现象

当你编写一个带有清理函数的 useEffect hook，并将它的依赖数组设置为空数组 [] 时，你可能会发现：组件卸载（Unmount）时，清理函数会被执行，但组件因为父组件重新渲染或其他状态更新而再次渲染（Render）时，清理函数并不会执行。

这看起来似乎与直觉不符，我们预期清理函数应该在每次效果运行前运行，以清理上一次的效果。

问题根源：理解依赖数组的作用

要理解这个行为，首先要明白 useEffect 钩子中依赖数组的真正含义。

依赖数组 [] 的意思是：“告诉 React，这个 effect 不依赖于组件的任何 props 或 state。因此，它不需要在每次渲染后都重新运行。”

基于这个含义，React 的执行逻辑如下：

1. 首次渲染（Mount）：组件首次挂载到 DOM 后，运行 effect 的主体部分（即你传给 useEffect 的函数体）。此时，不会运行清理函数，因为这是第一次，没有“上一次”的效果需要清理。
2. 后续渲染（Update）：当组件因为任何原因（父组件重渲染、自身 state 变化等）重新渲染时，React 会检查依赖数组。
   • 由于依赖数组是 []（空数组），React 认为依赖项没有变化。
   • 因此，它决定跳过这次 effect 的重新运行。
   • 既然 effect 的主体部分都没有运行，那么与之配套的清理函数自然也就没有机会运行。
3. 组件卸载（Unmount）：当组件从 DOM 中移除时，React 会运行该组件所有 useEffect 中最近一次成功运行的 effect 所返回的清理函数。

关键结论：清理函数的运行时机，完全依赖于其对应的 effect 主体部分是否重新运行。空数组 [] 阻止了 effect 的重运行，从而也阻止了清理函数在更新阶段的运行。

核心解决方案

如果你的 effect 确实执行了一次性的、与组件状态完全无关的操作（例如，一个固定的第三方库初始化），那么空数组 [] 的行为是完全正确且符合预期的，你无需修改。

但如果你的 effect 内部依赖了某些会变化的值，或者你需要在每次 effect 运行前都执行清理，那么空数组 [] 就是一个陷阱。

解决方案：将 effect 内部所依赖的、随时间变化的变量，正确地添加到依赖数组中。

让我们看一个具体例子。

错误示例

function UserProfile({ userId }) {
  useEffect(() => {
    // 假设这是一个根据 userId 订阅数据的函数
    const subscription = subscribeToData(userId);

    // 返回清理函数，用于取消订阅
    return () => {
      subscription.unsubscribe();
      console.log('清理已执行');
    };
  }, []); // 错误！依赖数组为空
  // ...渲染逻辑
}

问题：当 userId prop 变化时，组件会重新渲染。但由于 []，effect 不会重新运行，新 userId 的订阅不会建立，旧 userId 的订阅清理函数也不会运行，导致内存泄漏和数据错乱。

正确示例

function UserProfile({ userId }) {
  useEffect(() => {
    const subscription = subscribeToData(userId);

    return () => {
      subscription.unsubscribe();
      console.log('清理已执行');
    };
  }, [userId]); // 正确！将 userId 添加为依赖
  // ...渲染逻辑
}

现在的行为：

1. 当 userId 从 A 变为 B 时，组件重新渲染。
2. React 检查依赖数组 [userId]，发现从 A 变成了 B，依赖项发生了变化。
3. 首先，React 运行上一次 effect（针对 A）返回的清理函数。控制台输出 清理已执行。
4. 然后，React 运行新的 effect（针对 B），建立新的订阅。
5. 组件卸载时，最终会运行针对 B 的订阅的清理函数。

何时“不执行”是安全的，何时是陷阱

这是一个非常重要的实践判断。

如何迁移你的代码

如果你发现自己的代码中存在错误使用 [] 的情况，可以按照以下步骤修正：

1. 识别 effect 内的“变化源”：仔细阅读 useEffect 回调函数体，找出所有来自组件外部的“变化源”。这些通常是：

   • 组件的 props。
   • 组件的 state（通过 useState 获取）。
   • 在组件作用域内定义的、会变化的变量或函数。
   • 从 useContext 获取的上下文值。

2. 声明依赖：将所有识别出的“变化源”作为元素放入依赖数组。

   useEffect(() => {
     const data = fetchData(someProp, someState);
     // ... 使用 data 进行其他操作
     return () => {
       cleanupData(data);
     };
   }, [someProp, someState]); // 声明所有依赖

3. 使用 ESLint 插件 (强烈推荐)：安装并配置 eslint-plugin-react-hooks。它会在你编码时自动检查并提醒你遗漏的依赖项。规则 react-hooks/exhaustive-deps 是你的最佳帮手。

   // .eslintrc.json 示例
   {
     "plugins": ["react-hooks"],
     "rules": {
       "react-hooks/exhaustive-deps": "warn"
     }
   }

4. 处理不必要的重运行：有时，声明所有依赖会导致 effect 运行过于频繁。此时，你需要重新审视 effect 的逻辑：

   • 使用 useMemo 或 useCallback：稳定 effect 所依赖的函数或对象。
   • 在 effect 内部进行条件判断：只在真正需要执行清理或重新订阅时才执行。
   • 考虑使用 useReducer：将复杂的 effect 状态逻辑收敛到 reducer 中。
   • 最后的选择：使用 useRef：对于极少数场景，你可以使用 ref 来存储一个“最新的”回调或值，并在 effect 中读取它，从而从依赖数组中“隐藏”它。但这会降低代码可读性，应谨慎使用。

正确管理 useEffect 的依赖数组，是掌握 React Hooks 的关键一步。它确保了你的副作用代码在正确的时间运行和清理，避免了常见的内存泄漏和逻辑错误。