为什么组件呈现3次？

Question

我有这样一个组件：

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;

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

程序运行时立即输出：

comp运行 效果运行

10秒后：

comp运行 0

10秒后：

comp运行 0

10秒后：

0(然后每10秒继续增加0)

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

Answer 1

这是因为useEffect回忆录了它里面的所有价值。您可以使用两种方法：

1. 将count添加到useEffect的依赖项数组。当计数发生变化时，useEffect将刷新。 useEffect(() => {//您在这里的旧代码}，计数)；//这里
2. 在useCallback钩子内部创建一个函数，并为更好的性能编写回忆录函数。工作方式类似于第一种方式，但依赖于滴答函数，依赖于计数状态。 useCallback(() => {setCount(计数+ 1)；console.log(计数)；}，计数)；useEffect () => { const timer =setInterval(滴答，1000)；console.log(“效果运行”)；返回() => {clearInterval(计时器)；console.log(“清除函数运行”)；} }，滴答；