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

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 在同一次重新渲染中发生变化，是否保证控制台会记录 new prop1 值？ >

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

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

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

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

Answer 1

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

<块引用>

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

因此，通过模拟 batched set state（在同一重新渲染中 prop1 和 prop2 的更改），您可以注意到 first 将始终在 {{ 1}}：

second