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 (
    

数字:{count}

) }

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

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

比如:

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

你可能感兴趣的:(react,Hooks,useLayoutEffect)