React useEffect Hook 的异常行为答案

【问题标题】：Abnormal behaviour of React useEffect HookReact useEffect Hook 的异常行为
【发布时间】：2021-11-13 23:56:42
【问题描述】：

在使用 useEffect 挂钩时，我在浏览器上遇到来自 React 的异常输出。我会要求你看看代码。您可以在任何支持 React 的在线 IDE 上复制并粘贴代码，以可视化浏览器上的行为。我希望计数器每 1 秒递增一次。但是代码在 10 点之后就卡住了。

import { useState, useEffect } from "react";

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count + 1);
    }, 1000);

    // return () => {
    //   clearInterval(interval);
    // };
  }, [count]);

  return (
    <div className="App">
      <h1>{count}</h1>
    </div>
  );
}

export default App;

我想知道原因。为什么会这样？

但是，当我使用 useEffect 进行清理以执行 componentWillUnmoint() 时，它的行为正常并每秒正确呈现计数器。我特意注释了代码 useEffect 的清理部分。

【问题讨论】：

为什么会这样？
我希望计数器每 1 秒递增一次。但是代码会在 10 点后卡住。
为什么每次都要重新渲染？

标签： reactjs react-hooks use-effect use-state

【解决方案1】：

您正在为每次渲染添加一个间隔，很快，您的线程就会被间隔超载。

我猜你想运行一个间隔，它通过将函数传递给状态设置器（“功能更新”）来移除 count 上的闭包来完成：

import { useState, useEffect } from "react";

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div className="App">
      <h1>{count}</h1>
    </div>
  );
}

export default App;

【讨论】：