為什么組件渲染 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;

代碼運行時，控制台輸出如下：

程序運行時立即輸出：

---

補償運行

效果運行

---

10 秒后：

---

補償運行

0

---

10 秒后：

---

補償運行

0

---

10 秒后：

---

0（然后每十秒增加0）

---

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

Answer 1

這是因為useEffect 會記住其中的所有值。 您可以使用兩種方式：

1. 將count添加到 useEffect 的依賴項數組。 當計數改變時，useEffect 會刷新。

    useEffect(() => { //Your old code here }, [count]); //Here

2. 在useCallback鈎子和 memoize 函數中創建一個函數以獲得更好的性能。 像第一種方式一樣工作，但取決於刻度功能，取決於計數狀態。

    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]);