React 18中useLayoutEffect延迟useEffect状态更新的原因咨询

在React 18中 #

若组件中同时存在useLayoutEffect和useEffect，且二者均更新组件状态，则useEffect的状态更新会被推迟，直到useLayoutEffect停止触发渲染。

示例代码 #

export const App = () => {
  const [done, setDone] = useState(false);
  const [counter, setCounter] = useState(0);

  useLayoutEffect(() => {
    if (counter < 20) {
      setCounter(counter + 1);
    }
  }); // 故意在每次渲染时执行

  useEffect(() => {
    setDone(true);
  }); // 故意在每次渲染时执行

  console.log("render done", done);
  console.log("render counter", counter);
  console.log("\n");

  return <div>{counter} renders</div>;
};

输出结果 #

render done false
render counter 0
 
render done false
render counter 1

render done false
render counter 2

...

render done false
render counter 20

render done true
render counter 20

done状态仅在useLayoutEffect停止触发渲染后才会更新。

在React 17中 #

上述代码的输出结果为：

render done false
render counter 0

render done true
render counter 1
...

可见useEffect和useLayoutEffect的状态更新会在同一次渲染中生效。

问题 #

React 18中出现这种现象，是否是因为useLayoutEffect内部代码及其触发的所有状态更新会阻止浏览器重绘屏幕，而useEffect内部的状态更新要在浏览器重绘后才会处理？即useLayoutEffect的更新会延迟useEffect的更新？而React 17的处理方式是否不同？

内容的提问来源于stack exchange，提问作者Andronomewalka