React useEffect hooks 是否保证按顺序执行？

Question

假设我有这个：

function Example(props) {
  const { prop1, prop2 } = props;
  const latestProp1 = useRef(prop1);

  useEffect(() => {
    latestProp1.current = prop1;
  }, [prop1]);

  useEffect(() => {
    console.log(latestProp1.current);
  }, [prop2]);

  return null;
}

如果 和prop1在prop2同一个重新渲染中发生变化，是否可以保证控制台会记录新 prop1值？

如果我交换 useEffect 挂钩的位置 -

  useEffect(() => {
    console.log(latestProp1.current);
  }, [prop2]);

  useEffect(() => {
    latestProp1.current = prop1;
  }, [prop1]);

是否可以保证控制台会记录旧 prop1值（来自渲染之前）？

Answer 1

是的，如果您遵循Hooks 规则，则可以确保调用顺序（通过数组索引调用钩子，检查钩子是如何实现的）。

通过遵循此规则，您可以确保每次渲染组件时都以相同的顺序调用 Hook。

因此，通过模拟批量设置状态（两者都prop1在prop2同一重新渲染中更改），您可以注意到first始终会在之前记录second：

function Example(props) {
  const { prop1, prop2 } = props;

  React.useEffect(() => {
    console.log("first");
  }, [prop1]);

  React.useEffect(() => {
    console.log("second");
  }, [prop2]);

  return <>Example</>;
}

function Component() {
  const [counter, setCounter] = React.useState(0);
  const [counter2, setCounter2] = React.useState(0);

  const together = () => {
    setCounter2((p) => p + 1);
    setCounter((p) => p + 1);
  };

  return (
    <>
      <Example prop1={counter} prop2={counter2} />
      <button onClick={together}>together</button>
    </>
  );
}