3

useEffect和useLayoutEffect的区别

 3 years ago
source link: https://segmentfault.com/a/1190000040708302
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK