ReactJS - 如果不设置依赖项，每次重新渲染时都会运行 useEffect 设置函数吗？

Question

我最近正在学习React的

useEffect

钩子，我尝试用

useState

和

useEffect

编写一个函数来看看不同类型的

useEffect

依赖是如何工作的。下面是我的代码：

import { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [st1, setSt1] = useState("");
  const [st2, setSt2] = useState("");
  console.log("I'm in...");

  useEffect(() => {
    console.log("ef1");
  });

  useEffect(() => {
    console.log("ef2");
    setSt1("st1");
  }, []);

  useEffect(() => {
    console.log("ef3");
    setSt2("st2");
  }, [st1]);

  useEffect(() => {
    console.log("ef4");
  }, [st1, st2]);
  return (
    <div className="App">
      <header className="App-header"></header>
    </div>
  );
}

export default App;

在我的预期中，第一次会运行每个

useEffect

设置函数，然后

setState

会导致重新渲染并运行

ef1

、

ef3

、

ef4

，然后是

ef3

setState

会导致最后一次重新渲染并运行

ef1

。所以我的预期输出是

I'm in...
ef1
ef2
ef3
ef4
I'm in...
ef1
// check st1, different, execute ef3
ef3
// check st2, different, execute ef4
ef4
I'm in...
ef1
// check st2, same as previous value, doing nothing

但是当我运行代码时，真正的输出是

I'm in...
ef1
ef2
ef3
ef4
I'm in...
ef1
ef3
ef4
I'm in...

我不明白为什么它在上次渲染中不执行

ef1

函数。 有人可以向我解释一下吗？谢谢

Answer 1

那是因为依赖数组等于

useEffect

的

undefined

将在每次重新渲染时运行。基本上，当您执行

setState

时，您会触发突变（例如重新渲染）。自：

 useEffect(() => {
    console.log("ef2");
    setSt1("st1"); 
  }, []); // runs only on first render

  useEffect(() => {
    console.log("ef3");
    setSt2("st2");
  }, [st1]); // runs only on second render

  useEffect(() => {
    console.log("ef4");
  }, [st1, st2]); // runs on every renderer, but does not perform mutation

在第三次渲染时，您不会触发

ef4

中的任何突变，因此您的

ef1

使用效果不会被触发。