React的hooks---useLayoutEffect

useLayoutEffect 与 useEffect 类似，与 useEffect 在浏览器 layout 和 painting 完成后异步执行 effect 不同的是，它会在浏览器布局 layout 之后，painting 之前同步执行 effect

useLayoutEffect 的执行时机对比如下：

import React, { useState, useEffect, useLayoutEffect } from 'react';export default function LayoutEffect() {const [width, setWidth] = useState('100px');// useEffect 会在所有 DOM 渲染完成后执行 effect 回调useEffect(() => {console.log('effect width: ', width);});// useLayoutEffect 会在所有的 DOM 变更之后同步执行 effect 回调useLayoutEffect(() => {console.log('layoutEffect width: ', width);});return (<><div id='content' style={{ width, background: 'red' }}>内容</div><button onClick={() => setWidth('100px')}>100px</button><button onClick={() => setWidth('200px')}>200px</button><button onClick={() => setWidth('300px')}>300px</button></>);
}// 使用 setTimeout 保证在组件第一次渲染完成后执行，获取到对应的 DOM
setTimeout(() => {const contentEl = document.getElementById('content');// 监视目标 DOM 结构变更，会在 useLayoutEffect 回调执行后，useEffect 回调执行前调用const observer = new MutationObserver(() => {console.log('content element layout updated');});observer.observe(contentEl, {attributes: true});
}, 1000);