React@16.x（31）useLayoutEffect

1，介绍

在用法上和 useEffect 没有任何区别，只是执行的时间点不同。

• useEffect 会在组件渲染结束后，UI展示在页面上之后再执行。所以不会阻塞渲染。
• useLayoutEffect 会在组件渲染结束后，UI展示在页面之前执行，时间点和类组件中的 componentDidMount 和 componentDidUpdate 相同。
  所以，如果有比较耗时的操作，会阻塞UI渲染。

举例：

export default function App() {
    const [n, setN] = useState(0);
    const refH1 = useRef();
    useEffect(() => {
        refH1.current.innerText = "abc";
    });
    return (
        <>
            <h1 ref={refH1}>{n}</h1>
            <button
                onClick={() => {
                    setN(Math.random());
                }}
            >
                获取随机数
            </button>
        </>
    );
}

当点击获取随机数时，页面会有闪动。也就是说重新渲染 h1 元素的内容为随机数并在页面上展示后，又会立即执行 useEffect 变为 abc。

而如果使用 useLayoutEffect，因为执行时间点的问题，并不会有闪动效果。

2，注意点

尽量使用 useEffect，因为不会阻塞渲染。实现有问题了再考虑 useLayoutEffect。

---

以上。