Hooks-useLayoutEffect

在 useEffect 环节已经知道，useEffect 会在 DOM 渲染之后执行，也就是在下一轮事件循环中执行。
而useLayoutEffect的回调函数，会在渲染之前执行，也就是会在 DOM 变更之后同步的触发重新渲染。

该 Demo 中我们点击页面中的数字，再在useLayoutEffect回调中变为随机数。但在页面上数字不会变为 0，而是直接变为新的随机数。

import React, { useLayoutEffect, useState, useEffect } from 'react';
import './styles.css';

export default () => {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    if (count === 0) {
      const randomNum = 10 + Math.random() * 200;

      const now = performance.now();

      while (performance.now() - now < 100) {
        console.log(1);
      }

      setCount(randomNum);
    }
  }, [count]);

  return <div onClick={() => setCount(0)}>{count}</div>;
};

如果把useLayoutEffect换成useEffect，页面中就会先出现 0，再变为一个随机数。

useLayoutEffect会在layout阶段同步执行回调。回调函数中，触发了状态更新setCount(randomNum)，这会重新调度一个同步任务。
该任务会在commitRoot的flushSyncCallbakQeueu()函数中同步执行。

在线 demo 地址： https://codesandbox.io/s/pedantic-pare-zzqktq?file=/src/App.js