React-Hooks-useLayoutEffect

原创

杨不易呀

发布于 2023-10-01 08:29:15

5070

文章被收录于专栏：杨不易呀杨不易呀

useLayoutEffect Hook 概述

大部分情况下 useLayoutEffect 和 useEffect 没太大区别(用法格式都相同)
但是如果需要修改 DOM 的布局样式, 那么推荐使用 useLayoutEffect

为什么推荐在 useLayoutEffect 中修改 DOM 的布局样式？

useEffect 函数会在组件渲染到屏幕之后才执行, 所以会可能会出现 闪屏 的情况
useLayoutEffect 函数是在组件渲染到屏幕之前执行, 所以不会出现闪屏情况

首先来看 useEffect 会出现闪屏的情况代码如下：

App.js:

import React, {useRef, useState, useEffect} from 'react';
import './app.css'

function Home() {
    const pRef = useRef();
    useEffect(() => {
        console.log('组件被挂载或更新完成 - useEffect');
        pRef.current.style.left = '0px';
        pRef.current.style.left = '500px';

        return () => {
            console.log('组件即将被卸载 - useEffect');
        }
    });
    return (
        <div>
            <p ref={pRef}></p>
        </div>
    )
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            {show && <Home/>}
            <button onClick={() => {
                setShow(!show)
            }}>切换
            </button>
        </div>
    )
}

如上代码大致意思就是通过一个按钮来控制 Hmoe 组件的显示与隐藏。

app.css:

p {
    width: 100px;
    height: 100px;
    position: relative;
    left: 0;
    top: 0;
    background: red;
}

运行项目然后点击切换按钮，你会发现在切换的过程当中会有一闪而过的效果这就是所谓的闪屏。

在来看 useLayoutEffect 的效果代码如下：

import React, {useRef, useState, useLayoutEffect} from 'react';
import './app.css'

function Home() {
    const pRef = useRef();
    useLayoutEffect(() => {
        console.log('组件被挂载或更新完成 - useLayoutEffect');
        pRef.current.style.left = '0px';
        pRef.current.style.left = '500px';

        return () => {
            console.log('组件即将被卸载 - useLayoutEffect');
        }
    });
    return (
        <div>
            <p ref={pRef}></p>
        </div>
    )
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            {show && <Home/>}
            <button onClick={() => {
                setShow(!show)
            }}>切换
            </button>
        </div>
    )
}

可以很清晰的发现，两者的效果是完全不同的。

useEffect 和 useLayoutEffect 的区别

执行时机不同：

如果是挂载或者更新组件, 那么 useLayoutEffect 会比 useEffect 先执行

import React, {useRef, useState, useEffect, useLayoutEffect} from 'react';
import './app.css'

function Home() {
    const pRef = useRef();
    useEffect(() => {
        console.log('组件被挂载或更新完成 - useEffect');

        return () => {
            console.log('组件即将被卸载 - useEffect');
        }
    });

    useLayoutEffect(() => {
        console.log('组件被挂载或更新完成 - useLayoutEffect');

        return () => {
            console.log('组件即将被卸载 - useLayoutEffect');
        }
    });
    return (
        <div>
            <p ref={pRef}></p>
        </div>
    )
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            {show && <Home/>}
            <button onClick={() => {
                setShow(!show)
            }}>切换
            </button>
        </div>
    )
}

如果是卸载组件, 那么 useEffect 会比 useLayoutEffect 先执行

useEffect: 同步
useLayoutEffect: 异步

什么时候使用 useEffect

在绝大多数的情况下能用 useEffect, 就用 useEffect

什么时候用 useLayoutEffect

只有在需要组件挂载之后更新 DOM 的布局和样式的时候才使用 useLayoutEffect

为什么要使用 useLayoutEffect 来更新 DOM 布局和样式

useEffect 是组件已经渲染到屏幕上了才执行，useLayoutEffect 是组件还没有渲染到屏幕上就会执行，所以如果在组件已经渲染到屏幕上了, 才去更新 DOM 的布局和样式, 那么用户体验不好, 会看到闪屏的情况，而如果是在组件还没有渲染到屏幕上, 就去更新 DOM 的布局和样式, 那么用户体验更好, 看不到闪屏情况。

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第二期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第二期

登录后参与评论

0 条评论

热度