【React】useEffect 的依赖数组到底该怎么写？

useEffect 的依赖数组是 React 中一个非常重要的概念，它决定了 useEffect 的回调函数何时运行。依赖数组的写法直接影响到组件的性能和行为。以下是关于依赖数组的详细说明和最佳实践：

---

1. 什么是依赖数组？

useEffect 的基本形式如下：

useEffect(() => {
  // 副作用逻辑
}, [dependencies]);

• dependencies 是一个数组，表示 useEffect 的依赖项。
• 当依赖数组中的值发生变化时，useEffect 会重新运行。
• 如果依赖数组为空（[]），useEffect 只会在组件挂载和卸载时运行一次。

---

2. 依赖数组的写法规则

2.1 必须包含所有在 useEffect 中使用的外部变量

• React 要求你在依赖数组中声明所有在 useEffect 中使用的外部变量（即不在 useEffect 内部定义的变量）。
• 这是为了确保 useEffect 的行为是可预测的，不会因为某些变量的变化被遗漏而导致问题。

例如：

const [count, setCount] = useState(0);

useEffect(() => {
  console.log(count);
}, [count]); // count 是依赖项

2.2 不要遗漏依赖项

如果你遗漏了某些依赖项，可能会导致 useEffect 中的逻辑依赖于过期的变量值，从而引发 Bug。例如：

const [count, setCount] = useState(0);

useEffect(() => {
  const timer = setInterval(() => {
    console.log(count); // 如果 count 没有被添加到依赖数组中，这里的值可能不会更新
  }, 1000);

  return () => clearInterval(timer);
}, []); // 错误：count 应该在依赖数组中

正确的写法：

useEffect(() => {
  const timer = setInterval(() => {
    console.log(count);
  }, 1000);

  return () => clearInterval(timer);
}, [count]); // 正确：添加 count 作为依赖项

2.3 如果依赖数组为空

• 如果依赖数组为空（[]），useEffect 的回调函数只会在组件挂载时运行一次，并在组件卸载时运行清理函数（如果有）。
• 这种写法通常用于只需要在组件加载时执行一次的逻辑，例如初始化。

例如：

useEffect(() => {
  console.log('组件挂载时运行');
  return () => {
    console.log('组件卸载时运行');
  };
}, []); // 空依赖数组

2.4 动态依赖项

如果依赖项是动态变化的，必须在依赖数组中包含所有相关变量。例如：

useEffect(() => {
  fetchData(id); // id 是动态的
}, [id]); // 正确：id 是依赖项

---

3. 常见问题与解决方案

3.1 为什么不能随意省略依赖项？

省略依赖项可能会导致 useEffect 的回调函数无法感知变量的变化，导致副作用逻辑不一致。

错误示例：

const [count, setCount] = useState(0);

useEffect(() => {
  console.log(count); // 如果 count 未添加到依赖数组中，这里的值可能不会更新
}, []); // 错误

3.2 为什么 ESLint 会提示 “Missing dependency”?

React 官方提供了一个 ESLint 插件（eslint-plugin-react-hooks），它会检查 useEffect 的依赖数组是否正确。如果你遗漏了依赖项，插件会提示你补充。

解决方法：

• 按照提示添加所有依赖项。
• 如果某些依赖项不需要重新触发 useEffect，可以使用 useRef 或 useCallback 来稳定这些变量。

3.3 如果依赖数组变化太频繁怎么办？

如果依赖数组中的某些值变化过于频繁，可能导致 useEffect 频繁重新运行。可以通过以下方法优化：

1. 使用 useCallback 或 useMemo 缓存函数或计算值。
2. 将不变的变量提取到 useRef 中。

例如：

const stableFunction = useCallback(() => {
  // 函数逻辑
}, [dependency]); // 仅在 dependency 变化时更新

---

4. 总结与最佳实践

1. 列出所有依赖项：确保依赖数组中包含所有在 useEffect 中使用的外部变量。
2. 避免遗漏依赖项：使用 ESLint 插件帮助检查依赖数组的完整性。
3. 稳定依赖项：使用 useCallback 或 useMemo 缓存函数和计算值，减少不必要的重新渲染。
4. 空数组的使用场景：仅在组件挂载或卸载时运行的逻辑可以使用空依赖数组。
5. 清理副作用：如果 useEffect 中有清理逻辑（如 return），确保它与依赖项保持一致。

---

如果你有具体的场景或代码想要讨论，可以提供代码片段，我可以帮你分析依赖数组的写法！