React 里 useEffeft 死循环问题？

在 React 中，useEffect 是一个非常有用的钩子，它允许我们在组件渲染后执行副作用操作。然而，如果不正确使用，可能会导致无限循环的问题。

useEffect的第二个参数是一个依赖数组，React 会在这个数组中的任何值改变时重新运行副作用。如果你在 useEffect 中更改了一个依赖，那么就会创建一个无限循环，因为每次运行副作用都会更改依赖，这又会导致重新运行副作用。

以下是解决 useEffect 死循环问题的一些方法：

确保正确使用依赖数组：如果你的副作用不依赖于 props 或 state 的任何值，那么你应该传递一个空数组作为依赖，这样副作用只会在组件挂载和卸载时运行。

useEffect(() => {
  // 副作用代码
}, []); // 空依赖数组

避免在副作用中更改依赖：如果你的副作用依赖于某个值，并且在副作用中更改了这个值，那么你需要重新考虑你的逻辑，避免创建无限循环。

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


useEffect(() => {
  // 这会创建一个无限循环，因为我们在副作用中更改了一个依赖
  setCount(count + 1);
}, [count]);

使用条件判断：在某些情况下，你可能需要在某个条件满足时才运行副作用。你可以在副作用中添加一个条件判断，以防止无限循环。

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


useEffect(() => {
  // 只有当count小于10时，我们才更改count
  if (count < 10) {
    setCount(count + 1);
  }
}, [count]);

总的来说，解决useEffect死循环问题的关键是理解副作用和依赖是如何工作的，以及如何正确使用它们。

如果我的 effect 的依赖频繁变化，我该怎么办？

有时候，你的 effect 可能会使用一些频繁变化的值。你可能会忽略依赖列表中 state，但这通常会引起 Bug：

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


  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1); // 这个 effect 依赖于 `count` state
    }, 1000);
    return () => clearInterval(id);
  }, []); // 🔴 Bug: `count` 没有被指定为依赖


  return <h1>{count}</h1>;
}

传入空的依赖数组 []，意味着该 hook 只在组件挂载时运行一次，并非重新渲染时。但如此会有问题，在 setInterval 的回调中，count 的值不会发生变化。因为当 effect 执行时，我们会创建一个闭包，并将 count 的值被保存在该闭包当中，且初值为 0。每隔一秒，回调就会执行 setCount(0 + 1)，因此，count 永远不会超过 1。

指定 [count] 作为依赖列表就能修复这个 Bug，但会导致每次改变发生时定时器都被重置。事实上，每个 setInterval 在被清除前（类似于 setTimeout）都会调用一次。但这并不是我们想要的。要解决这个问题，我们可以使用 setState 的函数式更新形式。它允许我们指定 state 该 如何 改变而不用引用 当前 state：

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


  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1); // ✅ 在这不依赖于外部的 `count` 变量
    }, 1000);
    return () => clearInterval(id);
  }, []); // ✅ 我们的 effect 不使用组件作用域中的任何变量


  return <h1>{count}</h1>;
}

（setCount 函数的身份是被确保稳定的，所以可以放心的省略掉）

此时，setInterval 的回调依旧每秒调用一次，但每次 setCount 内部的回调取到的 count 是最新值（在回调中变量命名为 c）。

在一些更加复杂的场景中（比如一个 state 依赖于另一个 state），尝试用 useReducer Hook 把 state 更新逻辑移到 effect 之外。