useLayoutEffect

其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。尽可能使用标准的 useEffect 以避免阻塞视觉更新

JavaScript

import React, { useState, useEffect, useLayoutEffect } from "react";
export default function Demo() {
    let [num, setNum] = useState(0);
    // 再试试useLayoutEffect
    useEffect(() => {
        if (num === 0) {
            let random = +String(Math.random()).substring(2);
            setNum(random);
        }
    }, [num]);
    return <div
        style={{
            background: 'lightblue',
            WebkitUserSelect: "none"
        }}
        onClick={() => {
            setNum(0);
        }}>
        {num}
    </div>;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

useLayoutEffect #

useLayoutEffect