React@16.x(31)useLayoutEffect

1,介绍

在用法上和 useEffect 没有任何区别,只是执行的时间点不同

  • useEffect 会在组件渲染结束后,UI展示在页面上之后再执行。所以不会阻塞渲染。
  • useLayoutEffect 会在组件渲染结束后,UI展示在页面之前执行,时间点和类组件中的 componentDidMountcomponentDidUpdate 相同。
    所以,如果有比较耗时的操作,会阻塞UI渲染。

举例:

export default function App() {
    const [n, setN] = useState(0);
    const refH1 = useRef();
    useEffect(() => {
        refH1.current.innerText = "abc";
    });
    return (
        <>
            <h1 ref={refH1}>{n}</h1>
            <button
                onClick={() => {
                    setN(Math.random());
                }}
            >
                获取随机数
            </button>
        </>
    );
}

当点击获取随机数时,页面会有闪动。也就是说重新渲染 h1 元素的内容为随机数并在页面上展示后,又会立即执行 useEffect 变为 abc

而如果使用 useLayoutEffect,因为执行时间点的问题,并不会有闪动效果。

2,注意点

尽量使用 useEffect,因为不会阻塞渲染。实现有问题了再考虑 useLayoutEffect


以上。

相关推荐

  1. React@16.x31useLayoutEffect

    2024-06-18 01:14:03       39 阅读
  2. React@16.x30)useImperativeHandle

    2024-06-18 01:14:03       38 阅读
  3. react hook: useLayoutEffect

    2024-06-18 01:14:03       49 阅读
  4. React Hooks原理 - useEffect、useLayoutEffect

    2024-06-18 01:14:03       29 阅读
  5. React@16.x(23)useEffect

    2024-06-18 01:14:03       47 阅读
  6. React@16.x(26)useContext

    2024-06-18 01:14:03       41 阅读
  7. React@16.x(27)useCallBack

    2024-06-18 01:14:03       41 阅读
  8. React@16.x(28)useMemo

    2024-06-18 01:14:03       32 阅读
  9. React@16.x(25)useReducer

    2024-06-18 01:14:03       38 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-18 01:14:03       133 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-18 01:14:03       147 阅读
  3. 在Django里面运行非项目文件

    2024-06-18 01:14:03       123 阅读
  4. Python语言-面向对象

    2024-06-18 01:14:03       133 阅读

热门阅读

  1. Ionic 复选框:实现与应用详解

    2024-06-18 01:14:03       26 阅读
  2. 使用爬虫爬取豆瓣电影Top250(方法二)

    2024-06-18 01:14:03       32 阅读
  3. dos格式文档转unix格式

    2024-06-18 01:14:03       33 阅读
  4. ubuntu版本升级命令记录

    2024-06-18 01:14:03       33 阅读
  5. Android_Android Studio 常用快捷键 for mac

    2024-06-18 01:14:03       35 阅读
  6. PyTorch tutorials:快速学会使用PyTorch

    2024-06-18 01:14:03       26 阅读
  7. Kotlin 数据类(Data Class)

    2024-06-18 01:14:03       34 阅读
  8. 乘积最大3

    2024-06-18 01:14:03       36 阅读
  9. MySQL中的隐式转换(Implicit Conversion)

    2024-06-18 01:14:03       28 阅读
  10. 什么是内存泄漏?如何避免内存泄漏?

    2024-06-18 01:14:03       29 阅读