useLayoutEffect 与 useEffect 类似，与 useEffect 在浏览器 layout 和 painting 完成后异步执行 effect 不同的是，它会在浏览器布局 layout 之后，painting 之前同步执行 effect文章来源：https://www.toymoban.com/news/detail-609174.html
useLayoutEffect 的执行时机对比如下：文章来源地址https://www.toymoban.com/news/detail-609174.html
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);
到了这里，关于React的hooks---useLayoutEffect的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
