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><buttononClick={() => {setN(Math.random());}}>获取随机数</button></>);
}

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

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

2，注意点

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

---

以上。