react hooks 之 useLayoutEffect

useLayoutEffect

• useLayoutEffect 执行顺序，组件更新挂载完成 => 执行 useLayoutEffect 回调 => 浏览器 DOM 绘制完成 => 执行 useEffect 回调 。
• 大部分的情况 useEffect 中请求数据即可，useLayoutEffect 代码可能会阻塞浏览器的绘制。

import './App.css';

function App() {
    let [num, setNum] = useState(0);

    const add = () =>{
      setNum(num+1);
    }

  useLayoutEffect(()=>{
    console.log('useLayoutEffect', num);
    alert('点击确定后执行 useEffect');
  })

  useEffect(()=>{
    console.log('useEffect', num);
  })

  return (
      <div className="App">
        <h1 onClick={add}>{num}</h1>
    </div>
  );
}

export default App;