react Hook之useEffect、useLayoutEffect

useEffect，是在render结束后，你的callback函数执行，但是不会阻塞浏览器绘制，算是某种异步的方式。

useLayoutEffect，会在DOM变更后，同步执行callback函数，会在浏览器进行任何绘制之前运行完成，阻塞了浏览器的绘制。

就是在你需要让所有的dom变更后同时执行所有的effect的时候来使用，可以用来读取dom，之后同步触发重新render。

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

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

export default Animate;

如果使用useEffect就会出现闪一下