一、useLayoutEffect的介紹
useLayoutEffect是React提供的一個自定義hook，它是useEffect的一種替代方案，它在DOM更新階段之前同步被調用，因此能夠在這個階段操作DOM的布局和渲染，而useEffect則是在DOM更新之後異步被調用。useLayoutEffect和useEffect很像，但是它們的調用時機不同，useLayoutEffect更適用於需要同步地改變DOM以獲得更好的用戶體驗或測量DOM的大小等情況。
二、useLayoutEffect的應用
1、使用useLayoutEffect布局DOM
當需要在DOM更新前對DOM進行測量或者布局的時候，useLayoutEffect是一個很好的選擇。例如，當你需要知道某個DOM元素的寬高時，可以使用useLayoutEffect來獲取：
import React, { useLayoutEffect, useRef, useState } from 'react'; function Dimensions() {
const ref = useRef(null);
const [width, setWidth] = useState(null);
const [height, setHeight] = useState(null);
useLayoutEffect(() => {
if (ref.current) {
setWidth(ref.current.offsetWidth);
setHeight(ref.current.offsetHeight);
}
}, []);
return (
Hello, world!
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/152749.html
微信掃一掃 
支付寶掃一掃 