关于react.js: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;

能够分明的看到有一个一闪而过的方块.

改成 useLayoutEffect 试试:

能够看出, 每次刷新, 页面根本没变动!