reactjs - 调用 useEffect 的顺序

Question

当使用多个 useEffect 时，它们的调用顺序是什么？

考虑以下代码

import React from "react";

export default function App() {
  const [x, setX] = React.useState(2);

  React.useEffect(() => {
    console.log("A");
    setX(1);
  }, []);
  React.useEffect(() => {
    console.log("B");
    console.log(x);
  }, []);

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

控制台输出是

A
B
2

为什么 x 是 2 而不是 1？

Answer 1

useEffect 按照它们在代码中的编写顺序调用，并取决于 useEffect 的依赖导致其执行

此外，状态更新是异步的并且任何setX或其他状态更新器的使用都只会在useEffects的所有执行完成后更新这就是为什么 console.log(x) 显示 2 而不是 1