解决 React Hooks 无限循环的问题-JavaScript中文网-JavaScript教程资源分享门户

React Hooks 是 React 16.8 之后新推出的一种编写 React 组件的方式，它解决了类组件中很多烦人的问题，让我们的代码更加简洁和易于维护。不过，在使用 React Hooks 的过程中，我们有时候会遇到无限循环的问题，本篇文章就讲述如何解决这个问题。

什么是 React Hooks 的无限循环问题？

在使用 React Hooks 的时候，我们需要使用一些特定的 Hook 来实现各种功能，比如 useState、useEffect 等等。其中，useEffect Hook 是最容易引发无限循环问题的 Hook 之一。具体来说，当我们在 useEffect 中执行了一个导致组件重新渲染的操作时，如果没有思考清楚，就可能会引发无限循环的问题。比如下面这个例子：

// javascriptcn.com 代码示例
import React, { useEffect, useState } from "react";

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

  useEffect(() => {
    setCount(count + 1);
  }, []);

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

export default App;

在这个例子中，我们使用了一个 useState Hook 来保存一个数字 count，然后在 useEffect 中使用 setCount 更新 count，这样每次组件重新渲染都会导致 count 自增 1。但是，由于 useEffect 的第二个参数是空数组，所以 useEffect 只会在组件挂载的时候运行一次，也就意味着 count 每次都会是 1，而不是像我们预期的那样递增。这是因为 useEffect 中使用的 count 并不是最新的状态，而是在当前闭包中的旧状态。这种情况下，React 就会认为组件状态发生了变化，需要重新渲染组件，于是就引发了无限循环。

如何解决无限循环问题？

解决无限循环问题的方法有多种，下面是一些常用技巧：

1. 把 useState 和 useEffect 放在一起

我们可以将 useState 和 useEffect 放在一起，这样就可以保证 useEffect 中使用的 count 是最新的状态，而不是旧状态。例如：

// javascriptcn.com 代码示例
import React, { useEffect, useState } from "react";

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

  useEffect(() => {
    setCount(c => c + 1);
  }, [count]);

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

export default App;

在这个例子中，我们将 useEffect 的第二个参数设置为 [count]，这样每当 count 变化的时候，useEffect 就会重新运行一遍。同时，为了保证 count 是最新的状态，我们使用了 setCount 的函数式更新形式。这样就能够保证每次 count 的值都是上一次更新之后的值了。

2. 把 useEffect 拆分成多个

我们可以将 useEffect 拆分成多个，这样就可以限制它的作用范围，避免不必要的重新渲染。例如：

// javascriptcn.com 代码示例
import React, { useEffect, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState(null);

  useEffect(() => {
    setCount(c => c + 1);
  }, [count]);

  useEffect(() => {
    fetch("/api/data").then(res => res.json()).then(data => setData(data));
  }, []);

  return (
    <div>
      <div>{count}</div>
      <div>{data}</div>
    </div>
  );
}

export default App;

在这个例子中，我们将两个 useEffect 拆分成了两个。第一个 useEffect 依赖于 count 变化，每当 count 变化的时候就会重新运行；第二个 useEffect 只在组件挂载的时候运行一次，用于获取数据并更新状态。这样，我们就可以避免无限循环的问题了。

3. 使用 useRef 存储旧状态

如果我们需要在 useEffect 中使用旧状态，可以使用 useRef 来保存旧状态的值，这样就可以避免引用闭包中的旧状态。例如：

// javascriptcn.com 代码示例
import React, { useEffect, useRef, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef(0);

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  useEffect(() => {
    if (count > 0 && count === prevCountRef.current) {
      setCount(c => c + 1);
    }
  }, [count, prevCountRef]);

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

export default App;

在这个例子中，我们使用 useRef 来保存旧状态的值，然后在第一个 useEffect 中更新 prevCountRef 的值。在第二个 useEffect 中，我们判断当前的 count 是否等于旧状态，如果是，则递增 count。这样一来，我们就可以避免触发无限循环了。

总结

无限循环是使用 React Hooks 遇到的一个常见问题，但是我们可以使用上述技巧来避免它。最重要的是，我们应该认真思考每个 useEffect 中使用的依赖项，保证依赖项的正确性和完整性。如果你遇到了无限循环的问题，希望这篇文章能给你一些帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653230f67d4982a6eb47f2da