reacthooks2 之 useLayoutEffectreacthooks2 useEffect (可以理解为aft

reacthooks2

useEffect (可以理解为afterRender 每次render后运行) 对环境的改变即为副作用,比方说改变dom里的title

useLayoutEffect 总是先于 useEffect 为了用户体验优先使用useEffect (先给用户渲染出页面)

useEffect(()=>{
    document.title="123"
    
})

下列代码分别执行 useEffect 会有明显的闪烁从0变到1000,而uselayout没有。useLayoutEffect 在组件render 之前执行,而useEffect在之后。虽然有两步innertext==0 和等于1000 但是还没渲染到1000，浏览器只看到了 innertext是1000的过程

  const [value,setN]=useState(0)
//   useLayoutEffect(()=>{
   
//    document.querySelector('#x').innerText="1000"
    
//   })
  useEffect(()=>{
   document.querySelector('#x').innerText="1000"
    
})
return (
    <>
    
    
    <div id="x" >
     value :{value}
  
    </div>
   
  
    </>
  )

见下图