React的useEffect依赖数组把我坑惨了，原来这样写才靠谱

• React的useEffect依赖数组把我坑惨了，原来这样写才靠谱*

---

引言

在React的函数式组件中，useEffect是一个不可或缺的Hook，用于处理副作用（如数据获取、订阅、手动DOM操作等）。然而，它的依赖数组（dependency array）却是一个让无数开发者踩坑的"重灾区"。你是否曾经遇到过以下情况：

• 明明依赖数组里写了变量，却还是触发了无限循环？
• 漏写了某个依赖，导致副作用没有按预期执行？
• 依赖数组里放了一个对象或函数，结果每次渲染都会触发useEffect？

这些问题看似简单，但背后涉及React的渲染机制、闭包陷阱以及依赖项的比较逻辑。本文将深入剖析useEffect依赖数组的常见问题，并给出最佳实践，帮助你写出更可靠的代码。

---

主体

1. useEffect依赖数组的作用

useEffect的第二个参数是一个依赖数组，它的作用是告诉React："只有当这些依赖项发生变化时，才重新执行副作用。"如果省略依赖数组，副作用会在每次渲染后执行；如果依赖数组为空（[]），则副作用只会在组件挂载和卸载时执行。

useEffect(() => {
  // 副作用逻辑
}, [dependency1, dependency2]); // 依赖数组

2. 依赖数组的常见坑

2.1 漏写依赖导致的问题

最典型的错误是漏写依赖，导致副作用未能正确响应数据变化。例如：

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

useEffect(() => {
  console.log("Count changed:", count);
}, []); // 漏写了count

在这个例子中，count的变化不会触发useEffect，因为依赖数组为空。React会警告你："React Hook useEffect has a missing dependency: 'count'."

• 解决方法*：

• 确保所有在副作用中使用的变量都包含在依赖数组中。
• 如果某些变量确实不需要触发副作用（如不变的常量），可以忽略警告，但要谨慎。

2.2 依赖数组导致无限循环

另一种常见问题是依赖数组中的变量在每次渲染时都是新的引用（如对象或函数），导致useEffect不断执行。例如：

const user = { id: 1, name: "Alice" };

useEffect(() => {
  fetchUserDetails(user.id);
}, [user]); // user对象在每次渲染时都是新的引用

由于user是一个对象，每次渲染时都会生成一个新的引用（即使内容相同），因此useEffect会不断触发。

• 解决方法*：

• 对于对象或数组，可以拆解为基本类型依赖：

  useEffect(() => {
    fetchUserDetails(user.id);
  }, [user.id]); // 依赖id而非整个user对象

• 使用useMemo或useCallback缓存对象或函数：

  const user = useMemo(() => ({ id: 1, name: "Alice" }), []);
  
  useEffect(() => {
    fetchUserDetails(user.id);
  }, [user]); // 由于user被缓存，引用不变

2.3 依赖数组与闭包陷阱

useEffect的副作用函数会捕获当前渲染周期的变量值（闭包特性）。如果依赖数组未正确设置，可能会导致闭包陷阱。例如：

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

useEffect(() => {
  const timer = setInterval(() => {
    console.log(count); // 始终打印初始值（如0）
  }, 1000);
  return () => clearInterval(timer);
}, []); // 漏写count

由于count未包含在依赖数组中，副作用函数捕获的是初始渲染时的count值（闭包），后续count的变化不会反映在定时器中。

• 解决方法*：

• 正确填写依赖数组：

  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count); // 打印最新的count
    }, 1000);
    return () => clearInterval(timer);
  }, [count]); // 依赖count

• 如果不想依赖count但需要最新值，可以使用useRef保存：

  const countRef = useRef(count);
  countRef.current = count;
  
  useEffect(() => {
    const timer = setInterval(() => {
      console.log(countRef.current); // 始终获取最新值
    }, 1000);
    return () => clearInterval(timer);
  }, []);

3. 依赖数组的最佳实践

3.1 使用ESLint插件

React官方推荐使用eslint-plugin-react-hooks插件，它会自动检测依赖数组的问题。例如：

• 提示漏写的依赖。
• 警告可能导致无限循环的依赖。

3.2 拆分副作用

如果一个useEffect包含多个不相关的逻辑，可以拆分为多个useEffect，每个关注单一职责。例如：

// 不推荐：混合逻辑
useEffect(() => {
  fetchUser(id);
  fetchPosts(userId);
}, [id, userId]);

// 推荐：拆分
useEffect(() => {
  fetchUser(id);
}, [id]);

useEffect(() => {
  fetchPosts(userId);
}, [userId]);

3.3 避免在依赖数组中放置内联函数或对象

内联函数或对象在每次渲染时都会生成新的引用，导致useEffect频繁执行。例如：

// 不推荐：内联函数
useEffect(() => {
  fetchData({ id: 1 });
}, [{ id: 1 }]); // 每次渲染都是新对象

// 推荐：使用useMemo或常量
const config = useMemo(() => ({ id: 1 }), []);
useEffect(() => {
  fetchData(config);
}, [config]);

4. 特殊场景处理

4.1 只在挂载时执行的副作用

如果副作用只需在挂载时执行（如初始化），可以传递空依赖数组：

useEffect(() => {
  // 初始化逻辑（只执行一次）
}, []);

但需注意：如果副作用中使用了组件内的变量（如props或state），可能会捕获初始值（闭包问题）。

4.2 依赖变化时清理资源

如果副作用需要清理（如订阅、定时器），可以在返回的函数中处理：

useEffect(() => {
  const subscription = api.subscribe(data => console.log(data));
  return () => subscription.unsubscribe(); // 清理函数
}, [api]);

清理函数会在组件卸载或依赖变化时执行。

---

总结

useEffect的依赖数组看似简单，实则隐藏了许多细节和陷阱。正确使用依赖数组的关键在于：

1. 全面声明依赖：确保所有在副作用中使用的变量都包含在依赖数组中。
2. 避免引用变化 ：使用useMemo或useCallback缓存对象或函数，避免不必要的重渲染。
3. 拆分副作用 ：保持每个useEffect的单一职责，避免逻辑混杂。
4. 善用工具：使用ESLint插件自动检测依赖问题。

通过理解React的渲染机制和闭包特性，你可以避免大多数依赖数组的坑，写出更健壮的代码。希望本文能帮助你彻底掌握useEffect依赖数组的正确用法！