【useLayoutEffect Hook】在浏览器完成布局和绘制之前执行副作用

前言

useLayoutEffect 是 React 中的一个 Hook， 类似于 useEffect，但有一个关键的区别：它会在所有的 DOM 变更之后同步调用 effect。这意味着它可以读取 DOM 布局并同步重新渲染。如果你需要执行副作用并且这些副作用依赖于 DOM 布局（例如，获取元素的尺寸或位置），你应该使用 useLayoutEffect。

语法

useLayoutEffect(setup, dependencies?)

useLayoutEffect的语法和useEffect一样。

• setup： 处理副作用的函数。
• dependencies: 依赖项。

useLayoutEffect 对比 useEffect：

• 执行时机： useLayoutEffect 在浏览器绘制之前同步执行，useEffect则是在布局会绘制之后执行。
• 执行方式： useLayoutEffect同步执行，useEffect 异步执行。
• 堵塞浏览器渲染： useLayoutEffect会堵塞，useEffect不会堵塞。

结论：
若是需要同步读取或更改DOM，或者需要解决页面的闪烁问题，则需要使用useLayoutEffect。
否则，应该优先考虑使用useEffect。

下面测试响应的特性：

示例

import {
    useEffect, useLayoutEffect, useRef } from 'react';

export