When to useLayoutEffect in React【译】

原文链接daveceddia.com/useeffect-v… 代码来源于

github.com/MoonHighway…

Almost the same as useEffect

有两个React钩子，useffect和useLayoutEffect，它们的工作原理基本相同。他们的使用方式看起来都一样。

useEffect(() => { 
    // do side effects 
    return () => /* cleanup */ }, 
    [dependency, array]
); 
    
useLayoutEffect(() => { 
    // do side effects 
    return () => /* cleanup */ }, 
    [dependency, array]
);
复制代码

但它们并不完全相同。请继续阅读，了解它们的不同之处以及何时使用它们。（大多数情况下，你想要的是简单的useffect）
useEffect和useLayoutEffect之间的区别, 一切都取决于时机。useEffect在渲染绘制到屏幕后异步运行, 而useLayoutEffect渲染绘制到屏幕前同步运行。这看起来像：

• 以某种方式导致渲染（更改状态或父级重新渲染）
• React渲染组件（调用它）
• 屏幕在视觉上进行了更新
• 然后运行useffect

另一方面，useLayoutEffect在渲染之后但在屏幕更新之前同步运行。那就是：

• 以某种方式导致渲染（更改状态或父级重新渲染）
• React渲染组件（调用它）
• useLayoutEffect运行，React等待它完成。
• 屏幕在视觉上进行了更新
• 然后运行useffect

让我们来一段实例：

export default function App() {

useEffect(() => console.log("useEffect"));

useLayoutEffect(() => console.log("useLayoutEffect"));

return <div>ready</div>;

}
复制代码

日志会先打印useLayoutEffect， 然后才是useEffect。

When to useLayoutEffect

useLayoutEffect的调用时机是在渲染之后浏览器绘制之前，大多数情况下，我们需要的是useEffect， 但是如果要实现的效果对浏览器绘制很重要，那就要使用useLayoutEffect，例如在页面呈现之前跟踪鼠标的位置：

import React, { useState, useLayoutEffect } from "react";

function useMousePosition() {
    const [x, setX] = useState(0);
    const [y, setY] = useState(0);
    const setPosition = ({ x, y }) => {
        setX(x);
        setY(y);
    };
    useLayoutEffect(() => {
        window.addEventListener("mousemove", setPosition);
        return () => window.removeEventListener("mousemove", setPosition);
    }, []);
    return [x, y];
}

export default function App() {
    const [left, top] = useMousePosition();
    return (
        <div style={{ position: "absolute", top, left, cursor: "none" }}>
            {top}x{left}
        </div>
    );
}
复制代码

大多数情况下，useEffect是正确的选择。如果您的代码导致闪烁，请切换到useLayoutEffect并查看是否有帮助。

因为useLayoutEffect是同步，即在效果运行完成之前，应用程序不会进行可视化更新。如果效果中的代码速度较慢，可能会导致性能问题，如卡顿。