React,Hooks中useLayoutEffect的使用

useLayoutEffect看起来和useEffect非常的相似,事实上他们也只有一点区别而已，就是

1.useEffect会在渲染的内容更新到DOM上后执行,不会阻塞DOM的更新
2.useLayoutEffect会在渲染的内容更新到DOM上之前进行,会阻塞DOM的更新

下面通过一个案例来演示他们之间具体的区别

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

export default function UseLayoutEffect() {

  const [count,setCount] = useState(10)
  
  useEffect(()=>{
    if(count ===0){
      setCount(Math.random())
    }
  },[count])
  return (
    <div>
      <h2>数字:{count}</h2>
      <button onClick={e=>setCount(0)}>修改数字</button>
    </div>
  )
}

我们把count变成一个随机数， 虽然可以实现，但是当我们点击修改的时候其实是有一个闪烁的 因为它先把数字变为了0，再变成了随机数

但是当我们这样写把里面的useEffect换成了useLayoutEffect，页面就不会发生这个闪烁了，这个useLayoutEffect其实在开发中不太常用，一些特殊情况才会用

比如：

如果我们希望在某些操作发生之后再更新DOM,那么应该将这个操作放在useLayoutEffect