useEffect和useLayoutEffect的区别

useEffect会在页面状态更新到DOM之后再执行，就是说页面会先渲染一下，
如果useEffect里面更改了页面state，就会再在页面上渲染一下被改变的state，
页面发生了两次渲染


而useLayoutEffect是在页面状态更新到DOM之前就会回调，虽然内部state
改变顺序和useEffect一样，但是页面渲染最后一次

import React,{useEffect,useState} from 'react'

export default function UseEffect() {
  const [count, setCount] = useState(10)
  useEffect(() => {
    if(count === 0) {
      setCount(Math.random())
    }
  },[count])
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => setCount(0)}>改为0</button>
    </div>
  )
}

在当前程序中，count先由10变为0，然后执行render函数，页面一开始是显示0。
但是渲染到页面后，由于当前useEffect依赖于count，count已经发生了改变，
就会去回调useEffect里面的函数，于是count被赋值了一个随机数，就会再次render。
count 10——>0——>随机数的时间很短，因此肉眼很难观察到变化，可以快速点击，
会发生一个闪屏现象，印证了上面的结论



将程序里面的useEffect改为useLayoutEffect后，页面则直接会从10——>随机数，
其实它的内部也是经历了count 10——>0——>随机数，但是只渲染了最后那一下
快速点击，不会发生闪屏现象

两者差别不大，大多情况下直接使用useEffect就行