useEffect和useLayoutEffect的区别

起风了

useEffect和useLayoutEffect区别

布局副作用

useEffect在浏览器渲染完成后执行
useLayoutEffect在浏览器渲染前执行

特点:

useLayoutEffect总是比useEffect先执行
useLayoutEffect里面的任务最好影响了Layout(布局)

**注意:为了用户体验最好优先使用useEffect**

useEffect(副作用)

基本上90%的情况下,都应该用这个,这个是在render结束后,你的callback函数执行,但是不会block browser painting,算是某种异步的方式吧,但是class的componentDidMount 和componentDidUpdate是同步的,在render结束后就运行,useEffect在大部分场景下都比class的方式性能更好.

useLayoutEffect(布局副作用)

这个是用在处理DOM的时候,当你的useEffect里面的操作需要处理DOM,并且会改变页面的样式,就需要用这个,否则可能会出现出现闪屏问题, useLayoutEffect里面的callback函数会在DOM更新完成后立即执行,但是会在浏览器进行任何绘制之前运行完成,阻塞了浏览器的绘制.

可能讲的不是很清楚,看个例子吧

import React, { useEffect, useLayoutEffect, useRef } from "react";
import TweenMax from "gsap/TweenMax";
import './index.less';

const Animate = () => {
    const REl = useRef(null);
    useEffect(() => {
        /*下面这段代码的意思是当组件加载完成后,在0秒的时间内,将方块的横坐标位置移到600px的位置*/
        TweenMax.to(REl.current, 0, {x: 600})
    }, []);
    return (
        <div className='animate'>
            <div ref={REl} className="square">square</div>
        </div>
    );
};

export default Animate;

image.png
可以清楚的看到有一个一闪而过的方块.

改成useLayoutEffect试试:

image.png

可以看出,每次刷新,页面基本没变化!

阅读 155

北冥有鱼,其名为鲲。鲲之大,不知其几千里也;化而为鸟,其名为鹏。鹏之背,不知其几千里也;怒而飞,...

43 声望
15 粉丝
0 条评论
你知道吗?

北冥有鱼,其名为鲲。鲲之大,不知其几千里也;化而为鸟,其名为鹏。鹏之背,不知其几千里也;怒而飞,...

43 声望
15 粉丝
宣传栏