为什么组件渲染 3 次？答案

【问题标题】：why does the component render 3 times?为什么组件渲染 3 次？
【发布时间】：2021-07-19 11:55:33
【问题描述】：

我有一个这样的组件：

import { useEffect, useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  console.log("comp run");

  const tick = () => {
    setCount(count + 1);
    console.log(count);
  };

  useEffect(() => {
    const timer = setInterval(tick, 10000);
    console.log("effect run");

    return () => {
      clearInterval(timer);
      console.log("clear func run");
    };
  }, []);

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

export default Counter;

代码运行时，控制台输出如下：

程序运行时立即输出：

比较运行

效果运行

10 秒后：

比较运行

0

10 秒后：

比较运行

0

10 秒后：

0（然后每十秒增加0）

我不明白的是：“comp run”在屏幕上打印了 3 次。为什么是 3？

【问题讨论】：

因为您每 10 秒更新一次计数，这会重新渲染您的组件
实际上，您似乎没有更新计数，因为它始终为 0。
您可能还想考虑使用 useInterval as using setInterval with an effect can have odd side-effects 之类的东西。
尝试将setCount(count + 1);切换为setCount(prevCount => prevCount + 1);

标签： javascript reactjs use-state

【解决方案1】：

这是因为useEffect 记住了其中的所有值。您可以使用两种方式：

将count 添加到useEffect 的依赖数组中。并且当 count 改变时，useEffect 会刷新。
```
useEffect(() => {
    //Your old code here
}, [count]); //Here
```

在useCallback 钩子和记忆函数中创建一个函数以获得更好的性能。像第一种方式一样工作，但依赖于刻度函数，依赖于计数状态。

const tick = useCallback(() => {
  setCount(count + 1);
  console.log(count);
}, [count]);

useEffect(() => {
  const timer = setInterval(tick, 1000);
  console.log("effect run");

  return () => {
    clearInterval(timer);
    console.log("clear func run");
  };
}, [tick]);

【讨论】：