Layout Hook

LayoutEffect Hook

浏览器的页面大致渲染过程：

对DOM进行了改动（同步代码） => 浏览器下一次渲染时间点到达 => 对比差异，进行渲染（异步）=> 用户看到新的效果

useEffect: 浏览器渲染完成后，用户看到新的效果后

useLayoutEffect：完成了DOM改动，但还没有呈现给用户。和useEffect的用法没有任何区别，

唯一的区别就是运行的时间点不同。

应该尽量使用useEffect，因为它不会导致渲染阻塞，如果出现了问题，再考虑useLayoutEffect

useLayoutEffect.png

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

const App = () => {

  const [count, setCount] = useState(0)
  const h1Ref = useRef()

  // 使用useEffect时 在内部用ref操作元素DOM时 有可能导致页面一进来会先闪现 0 再 变为 random值
  // useEffect(() => {
  //   h1Ref.current.innerText = Math.random().toFixed(2)
  // })
  useLayoutEffect(() => {
    h1Ref.current.innerText = Math.random().toFixed(2)
  })

  return (
    <div>
      <h1 ref={h1Ref}>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

export default App