React useEffect依赖数组把我坑惨了，这次搞明白了

• React useEffect依赖数组把我坑惨了，这次搞明白了*

---

引言

在React开发中，useEffect是管理副作用的利器，但它的依赖数组（dependency array）却让不少开发者踩坑。我曾多次因为依赖数组的问题导致组件行为异常，甚至引发无限循环。经过反复实践和研究，我终于搞清楚了其中的核心机制和最佳实践。本文将深入剖析useEffect依赖数组的工作原理、常见陷阱以及如何正确使用它。

1. useEffect的基本用法

useEffect是React Hooks中用于处理副作用的钩子函数，其基本语法如下：

useEffect(() => {
  // 副作用逻辑
  return () => {
    // 清理逻辑（可选）
  };
}, [dependencies]);

• 副作用逻辑：比如数据获取、订阅、手动操作DOM等。
• 清理逻辑：在组件卸载或依赖项变化时执行，用于取消订阅或清除定时器等。
• 依赖数组：决定副作用何时重新执行的关键。

2. 依赖数组的作用机制

依赖数组的核心作用是告诉React：只有当数组中的某个值发生变化时，才重新执行副作用。它的行为可以分为以下几种情况：

1. 空数组 [] ：副作用仅在组件挂载时执行一次，类似于componentDidMount。
2. 不传递依赖数组 ：副作用在每次组件渲染后都执行，类似于componentDidUpdate。
3. 非空数组 [a, b] ：只有当a或b的值发生变化时，副作用才会重新执行。

为什么依赖数组如此重要？

依赖数组的缺失或不正确使用会导致以下问题：

• 无限循环：副作用中更新了状态，但未正确声明依赖项，导致组件反复渲染。
• 过时闭包：依赖项未包含所有变化的值，导致副作用中使用的是旧值。
• 性能问题：不必要的副作用执行会拖慢应用性能。

3. 常见陷阱与解决方案

陷阱1：依赖项遗漏

• 问题*：在副作用中使用了某个状态或prop，但未将其添加到依赖数组中。

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

useEffect(() => {
  console.log(count); // 使用了count，但依赖数组为空
}, []); // ❌ 遗漏了count

• 后果 *：console.log只会打印初始值，即使count更新也不会触发副作用。

• 解决方案*：

• 将所有在副作用中使用的变量添加到依赖数组中。
• 使用ESLint的exhaustive-deps规则自动检测遗漏的依赖项。

useEffect(() => {
  console.log(count);
}, [count]); // ✅ 正确声明依赖

陷阱2：依赖项过多导致频繁执行

• 问题*：依赖数组中包含过多变量，导致副作用频繁执行。

useEffect(() => {
  fetchData(userId, filter);
}, [userId, filter]); // 可能因filter频繁变化而重复请求

• 解决方案*：

• 使用useCallback或useMemo缓存函数或值，减少依赖项变化频率。
• 拆分副作用，将不相关的逻辑分离到不同的useEffect中。

const fetchData = useCallback(() => {
  // 逻辑
}, [userId]); // 只依赖userId

useEffect(() => {
  fetchData();
}, [fetchData]); // 依赖缓存后的函数

陷阱3：对象或数组作为依赖项

• 问题*：对象或数组在每次渲染时都是新引用，导致副作用不必要的执行。

const config = { timeout: 1000 };

useEffect(() => {
  // 逻辑
}, [config]); // ❌ 每次渲染config都是新对象

• 解决方案*：

• 使用useMemo缓存对象或数组。
• 如果依赖项是对象中的某个属性，直接将该属性作为依赖。

const config = useMemo(() => ({ timeout: 1000 }), []);

useEffect(() => {
  // 逻辑
}, [config]); // ✅ 依赖项稳定

4. 高级技巧与最佳实践

1. 使用函数作为依赖项

如果副作用依赖一个函数，应该将该函数用useCallback缓存：

const fetchData = useCallback(() => {
  // 逻辑
}, [userId]);

useEffect(() => {
  fetchData();
}, [fetchData]);

2. 依赖项是动态数组或对象

对于动态生成的依赖项（如从API获取的列表），可以用JSON.stringify或深层比较库（如lodash/isEqual）来比较变化：

const [items, setItems] = useState([]);

useEffect(() => {
  // 逻辑
}, [JSON.stringify(items)]); // 比较序列化后的字符串

3. 清理副作用的时机

如果副作用需要清理（如订阅或定时器），清理函数会在以下时机执行：

• 组件卸载时。
• 依赖项变化时，执行下一次副作用之前。

useEffect(() => {
  const timer = setInterval(() => {}, 1000);
  return () => clearInterval(timer); // 清理定时器
}, []);

5. 总结

useEffect的依赖数组是React Hooks中容易出错但极其重要的部分。正确使用依赖数组可以避免无限循环、过时闭包和性能问题。核心原则包括：

1. 完整声明依赖：确保副作用中使用的所有变量都包含在依赖数组中。
2. 优化依赖项 ：通过useMemo和useCallback减少依赖项的变化频率。
3. 拆分副作用 ：将不相关的逻辑拆分到多个useEffect中。

通过深入理解依赖数组的机制和常见陷阱，开发者可以更高效地管理副作用，构建稳定、高性能的React应用。