useEffect 与 useLayoutEffect 和 useMutationEffect 的区别

useEffect

99% 的情况下都用这个。当钩子稳定并且如果重构任何类组件以使用钩子时，可以将任何代码从 componentDidMount、componentDidUpdate 和 componentWillUnmount 移动到 useEffect。

useLayoutEffect

这会在 React 执行完所有 DOM 更改后立即同步运行。useLayoutEffect和componentDidMount和componentDidUpdate触发时机一致（都在在DOM修改后且浏览器渲染之前）。useLayoutEffect要比useEffect更早的触发执行。useLayoutEffect会阻塞浏览器渲染，执行同步会耗时。如果需要进行 DOM 测量数值（例如获取元素的滚动位置或其他样式），然后进行 DOM 突变或通过更新状态触发同步重新渲染，用这个钩子准没错。

useEffect 与 useLayoutEffect的例子

function LayoutEffect() {
    const [color, setColor] = useState('pink');
    useLayoutEffect(() => {
        alert(color); // 先弹窗，再重绘
    });
    useEffect(() => {
        console.log('color', color);// 重绘同时打印颜色
    });
    return (
        <>
            <div id="myDiv" style={{ border: `10px solid ${color}` }}>
                <button onClick={() => setColor('pink')}>粉红</button>
                <button onClick={() => setColor('lightgreen')}>浅绿</button>
                <button onClick={() => setColor('lightblue')}>浅蓝</button>
            </div>
        </>
    );
}

useMutationEffect

这在 React 渲染您的组件的同时同步运行。如果要改变 DOM，就用这个钩子，但前提是你不需要从 DOM 中读取值。（这个钩子貌似已经废弃了）

总结

• useMutationEffect：如果你需要改变 DOM 但不需要执行测量数值
• useLayoutEffect：
  • useLayoutEffect 会在 浏览器 layout 之后，painting 之前执行。
  • 如果你需要改变 DOM 或者DOM需要获取测量数值，除非要修改DOM并且不让用户看到修改DOM的过程，才考虑用它来读取 DOM 布局并同步触发重渲染，否则应当使用useEffect。
  • 在浏览器执行绘制之前 useLayoutEffect 内部的更新计划将被同步刷新。
  • 尽可能使用标准的 useEffect 以避免阻塞视图更新
• useEffect： useEffect 在全部渲染完毕后才会执行。 如果根本不需要与 DOM 交互或者你的 DOM 更改是不可观察的，那就用useEffect。

公众号

欢迎大家关注我的公众号： 石马上coding，一起成长