useLayoutEffect、useEffect

• 用法一致
• 简述react渲染：同步宏任务->数据变更->useLayoutEffect->计算dom->渲染dom->useEffect
• useLayoutEffect在渲染dom之前，而useEffect在渲染dom之后,所以如果需要计算样式布局，在layout里可以相对的减少回流重绘，因为还没绘制

• 执行顺序例子

const Demo = () => {
    useEffect(() => {
        console.log('useEffect');
    }, []);
    useLayoutEffect(() => {
        console.log('useLayoutEffect');
    }, []);
    return (
        <div>
            渲染
        </div>
    )
}

• 表现形式
  • 给div添加了1秒的动画效果，useEffect是有动画效果的，而useLayoutEffect没有
  • 可以充分解释上述情况：
  • useEffect:先渲染dom，然后effect执行触发dom二次变更
  • useLayoutEffect:在渲染前变更，然后渲染后没有触发缓动

//css----
.box {
    position: fixed;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    background-color: aqua;
    transition: all 1s ease;
}

const Demo = () => {
   //可以换成useLayoutEffect
    useEffect(() => {
        const box = document.querySelector('.box') as HTMLDivElement;
        box.style.left = '500px';
    }, []);

    return <div className="box"></div>
};