桔子建站,企业网站建设公司网络服务,手机响应式网站,做门窗网站怎么做useLayoutEffect 与 useEffect 类似#xff0c;与 useEffect 在浏览器 layout 和 painting 完成后异步执行 effect 不同的是#xff0c;它会在浏览器布局 layout 之后#xff0c;painting 之前同步执行 effect
useLayoutEffect 的执行时机对比如下#xff1a;
import Rea…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 idcontent style{{ width, background: red }}内容/divbutton onClick{() setWidth(100px)}100px/buttonbutton onClick{() setWidth(200px)}200px/buttonbutton 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);
