useLayoutEffect 和 useEffect 的区别

import React, { useEffect, useState, useLayoutEffect, useRef } from 'react';
import { render } from 'react-dom';

function App() {
  const [count, setCount] = useState(0);

  function setNumber() {
    console.log('setNumber 执行');
    setCount(0);
  }

  // 如果是 useEffect，调用 setNumber 后 count 先变为 0，然后 alert，最后 count 改变
  // 如果是 useLayoutEffect，调用 setNumber 后先弹框，最后 count 才会改变，
  // useEffect(() => {
  useLayoutEffect(() => {
    alert('111');
    if (count === 0) {
      const randomNum = 10 + Math.random() * 200;
      setCount(10 + Math.random() * 200);
    }
  }, [count]);

  return <div onClick={setNumber}>{count}</div>;
}

render(<App />, document.getElementById('root'));