React Hooks 是 React 16.8 之后新推出的一种编写 React 组件的方式，它解决了类组件中很多烦人的问题，让我们的代码更加简洁和易于维护。不过，在使用 React Hooks 的过程中，我们有时候会遇到无限循环的问题，本篇文章就讲述如何解决这个问题。
什么是 React Hooks 的无限循环问题？
在使用 React Hooks 的时候，我们需要使用一些特定的 Hook 来实现各种功能，比如 useState、useEffect 等等。其中，useEffect Hook 是最容易引发无限循环问题的 Hook 之一。具体来说，当我们在 useEffect 中执行了一个导致组件重新渲染的操作时，如果没有思考清楚，就可能会引发无限循环的问题。比如下面这个例子：
------ ------ - ---------- -------- - ---- --------
-------- ----- -
----- ------- --------- - ------------
------------ -- -
-------------- - ---
-- ----
------ -------------------
-
------ ------- ----在这个例子中，我们使用了一个 useState Hook 来保存一个数字 count，然后在 useEffect 中使用 setCount 更新 count，这样每次组件重新渲染都会导致 count 自增 1。但是，由于 useEffect 的第二个参数是空数组，所以 useEffect 只会在组件挂载的时候运行一次，也就意味着 count 每次都会是 1，而不是像我们预期的那样递增。这是因为 useEffect 中使用的 count 并不是最新的状态，而是在当前闭包中的旧状态。这种情况下，React 就会认为组件状态发生了变化，需要重新渲染组件，于是就引发了无限循环。
如何解决无限循环问题？
解决无限循环问题的方法有多种，下面是一些常用技巧：
1. 把 useState 和 useEffect 放在一起
我们可以将 useState 和 useEffect 放在一起，这样就可以保证 useEffect 中使用的 count 是最新的状态，而不是旧状态。例如：
------ ------ - ---------- -------- - ---- --------
-------- ----- -
----- ------- --------- - ------------
------------ -- -
---------- -- - - ---
-- ---------
------ -------------------
-
------ ------- ----在这个例子中，我们将 useEffect 的第二个参数设置为 [count]，这样每当 count 变化的时候，useEffect 就会重新运行一遍。同时，为了保证 count 是最新的状态，我们使用了 setCount 的函数式更新形式。这样就能够保证每次 count 的值都是上一次更新之后的值了。
2. 把 useEffect 拆分成多个
我们可以将 useEffect 拆分成多个，这样就可以限制它的作用范围，避免不必要的重新渲染。例如：
------ ------ - ---------- -------- - ---- --------
-------- ----- -
----- ------- --------- - ------------
----- ------ -------- - ---------------
------------ -- -
---------- -- - - ---
-- ---------
------------ -- -
--------------------------- -- --------------------- -- ---------------
-- ----
------ -
-----
------------------
-----------------
------
--
-
------ ------- ----在这个例子中，我们将两个 useEffect 拆分成了两个。第一个 useEffect 依赖于 count 变化，每当 count 变化的时候就会重新运行；第二个 useEffect 只在组件挂载的时候运行一次，用于获取数据并更新状态。这样，我们就可以避免无限循环的问题了。
3. 使用 useRef 存储旧状态
如果我们需要在 useEffect 中使用旧状态，可以使用 useRef 来保存旧状态的值，这样就可以避免引用闭包中的旧状态。例如：
------ ------ - ---------- ------- -------- - ---- --------
-------- ----- -
----- ------- --------- - ------------
----- ------------ - ----------
------------ -- -
-------------------- - ------
-- ---------
------------ -- -
-- ------ - - -- ----- --- --------------------- -
---------- -- - - ---
-
-- ------- ---------------
------ -------------------
-
------ ------- ----在这个例子中，我们使用 useRef 来保存旧状态的值，然后在第一个 useEffect 中更新 prevCountRef 的值。在第二个 useEffect 中，我们判断当前的 count 是否等于旧状态，如果是，则递增 count。这样一来，我们就可以避免触发无限循环了。
总结
无限循环是使用 React Hooks 遇到的一个常见问题，但是我们可以使用上述技巧来避免它。最重要的是，我们应该认真思考每个 useEffect 中使用的依赖项，保证依赖项的正确性和完整性。如果你遇到了无限循环的问题，希望这篇文章能给你一些帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653230f67d4982a6eb47f2da