「React」之useLayoutEffect

关于useLayoutEffect

useEffect 和 useLayoutEffect 都是 React 中的 Hook，用于在函数组件中执行副作用操作。它们的主要区别在于触发时间和执行时机。

• useEffect
  触发时间：在浏览器绘制完成后异步执行。
  执行时机：在组件渲染完成后进行副作用操作，不会阻塞浏览器的渲染过程。
  常用场景：数据获取、订阅事件、网络请求等副作用操作。

• useLayoutEffect
  触发时间：在浏览器绘制之前同步执行。
  执行时机：在组件渲染完成后，在浏览器执行绘制操作之前立即执行副作用操作，相当于有一个防抖效果。
  常用场景：需要在 DOM 更新之前进行一些计算、修改 DOM 的副作用操作。

由于 useLayoutEffect 在浏览器绘制之前同步执行，如果它的执行时间过长，可能会阻塞页面渲染，导致用户看到延迟。
使用时，优先使用useEffect，出现界面内容闪烁，使用useLayoutEffect。

用法对比

• useEffect

import { useEffect, useState } from 'react'

export default function Index() {
  const [state, setState] = useState(0)
  useEffect(() => {
    console.log('触发useEffect', state)
    setState(900)
  }, [state])
  console.log('render', state)
  return (
    <div>
      <span>{state}</span>
    </div>
  )
}

可能会发现界面由0→900进行一次闪烁

• useLayoutEffect

import { useLayoutEffect, useState } from 'react'

export default function Index() {
  const [state, setState] = useState(0)
  useLayoutEffect(() => {
    console.log('触发useLayoutEffect', state)
    setState(900)
  }, [state])
  console.log('render', state)
  return (
    <div>
      <span>{state}</span>
    </div>
  )
}

打开时界面就是900，没有发生闪烁。