React useEffect里面写异步，我的状态怎么老丢？

• React useEffect里面写异步，我的状态怎么老丢？*

---

引言

在使用React开发过程中，useEffect是我们最常用的Hook之一，用于处理副作用逻辑。然而，当我们在useEffect中编写异步代码（如fetch请求、setTimeout或Promise）时，常常会遇到一个令人困惑的问题：状态丢失。

为什么在异步回调中访问的状态可能不是最新的？为什么useEffect的依赖项明明正确设置了，却还是无法捕获最新的状态？这篇博客将从React的闭包机制、useEffect的生命周期以及异步代码的执行时机入手，深入分析问题的根源，并提供解决方案。

---

主体

1. 问题现象

假设我们有以下代码：

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

  useEffect(() => {
    const timer = setTimeout(() => {
      console.log(count); // 问题：这里的count可能不是最新的
    }, 1000);

    return () => clearTimeout(timer);
  }, []); // 依赖项为空数组

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

在这个例子中，我们期望点击按钮后，setTimeout的回调中打印的count是最新值。然而实际运行时会发现，无论点击多少次按钮，setTimeout中的count始终是初始值0。

2. 问题根源：闭包与依赖项

闭包机制

JavaScript的函数闭包会捕获其创建时的变量值。在useEffect中，异步回调（如setTimeout的回调）会"记住"它被创建时的count值。由于useEffect的依赖项是空数组（[]），它只会在组件挂载时运行一次，因此setTimeout的回包捕获的是当时的count值（即初始值0）。

依赖项的作用

React通过依赖项数组决定useEffect是否需要重新执行。如果依赖项为空，useEffect仅在组件挂载时运行一次，后续的状态更新不会触发它。因此，异步回调中访问的状态始终是初次渲染时的快照。

3. 解决方案

方案1：正确设置依赖项

最简单的解决方法是让useEffect在count变化时重新运行：

useEffect(() => {
  const timer = setTimeout(() => {
    console.log(count); // 现在能获取到最新的count
  }, 1000);

  return () => clearTimeout(timer);
}, [count]); // 依赖项包含count

这样，每次count变化时，useEffect会重新执行，新的异步回调会捕获最新的count值。

方案2：使用useRef保存最新值

如果不想让useEffect频繁重新运行，可以用useRef保存状态的最新值：

function Example() {
  const [count, setCount] = useState(0);
  const latestCount = useRef(count);

  useEffect(() => {
    latestCount.current = count; // 每次渲染时更新ref的值
  });

  useEffect(() => {
    const timer = setTimeout(() => {
      console.log(latestCount.current); // 通过ref获取最新值
    }, 1000);

    return () => clearTimeout(timer);
  }, []); // 依赖项为空

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

useRef的值在每次渲染时更新，但不会触发useEffect重新运行，因此异步回调可以通过ref.current访问最新状态。

方案3：使用useReducer或函数式更新

对于复杂状态逻辑，可以使用useReducer，或者通过函数式更新确保状态的一致性：

useEffect(() => {
  const timer = setTimeout(() => {
    setCount(prevCount => {
      console.log(prevCount); // 获取最新的prevCount
      return prevCount;
    });
  }, 1000);

  return () => clearTimeout(timer);
}, []);

方案4：使用useCallback封装异步逻辑

如果异步逻辑较复杂，可以用useCallback封装并添加依赖项：

const fetchData = useCallback(async () => {
  const response = await fetch(`/api/data?id=${count}`);
  console.log(response);
}, [count]); // 依赖项包含count

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

4. 深入分析：useEffect的清理机制

useEffect的清理函数（return的函数）会在下一次useEffect运行前执行。如果依赖项频繁变化，可能会导致清理函数频繁触发，从而引发竞态条件（Race Condition）。例如：

useEffect(() => {
  let isMounted = true;
  fetch(`/api/data?id=${count}`)
    .then(res => res.json())
    .then(data => {
      if (isMounted) {
        setData(data);
      }
    });

  return () => {
    isMounted = false; // 避免组件卸载后更新状态
  };
}, [count]);

在异步请求场景中，如果count变化很快，前一个请求的结果可能会覆盖后一个请求的结果。通过isMounted标志可以避免这种情况。

---

总结

在useEffect中编写异步代码时，状态丢失问题的根本原因是闭包和依赖项的不匹配。解决这一问题的核心在于：

1. 正确设置依赖项 ：确保useEffect在依赖的状态变化时重新运行。
2. 使用useRef保存最新值 ：避免频繁触发useEffect，同时能访问最新状态。
3. 利用清理函数处理竞态条件：防止过时的异步操作更新状态。
4. 函数式更新或useReducer：适用于复杂状态逻辑。

理解React的闭包机制和useEffect的生命周期是解决这类问题的关键。希望本文能帮助你彻底解决"状态丢失"的困扰！