useLayoutEffect和useEffect是React中常用的兩個Hook，它們的主要區(qū)別在于觸發(fā)時機。
-
useEffect會在渲染完成后異步執(zhí)行，不會阻塞瀏覽器的繪制操作。它適用于需要在組件渲染后執(zhí)行副作用的情況，例如數(shù)據(jù)的獲取、訂閱事件等。它不會阻止屏幕更新，因此可能會導(dǎo)致渲染的一次跳躍，用戶可能會在頁面渲染完成后才看到最終效果。 -
useLayoutEffect的觸發(fā)時機稍早于useEffect，在瀏覽器執(zhí)行繪制之前同步執(zhí)行。它適用于需要在DOM更新之后同步執(zhí)行副作用的情況，例如獲取DOM元素的尺寸、位置等。由于它會在頁面渲染之前執(zhí)行，因此可以阻止屏幕更新，確保副作用的執(zhí)行不會引起渲染跳躍，提供更流暢的用戶體驗。
需要注意的是，由于useLayoutEffect會在DOM操作之后同步執(zhí)行，如果執(zhí)行的操作非常耗時，則可能導(dǎo)致頁面響應(yīng)變慢。在大多數(shù)情況下，使用useEffect即可滿足需求，只有在確實需要在DOM更新后立即執(zhí)行副作用時才考慮使用useLayoutEffect。文章來源：http://www.zghlxwxcb.cn/news/detail-703384.html
應(yīng)用useLayoutEffect的場景，比如：文章來源地址http://www.zghlxwxcb.cn/news/detail-703384.html
React.useLayoutEffect(() => {
// 環(huán)形圖自適應(yīng)寬度設(shè)置
const resizePieWidth = () => {
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (+width >= 992) {
setPieWidth(165);
} else if (+width > 1150) {
setPieWidth(205);
} else if (+width > 1250) {
setPieWidth(235);
} else if (+width > 1350 || +width < 992) {
setPieWidth(260);
}
};
// 初始時需要觸發(fā)resize，否則會有樣式兼容問題
resizePieWidth();
const onResize = debounce(() => {
resizePieWidth();
}, 50);
window.addEventListener('resize', onResize);
return () => {
window.removeEventListener('resize', onResize);
};
});
到了這里，關(guān)于【React 】useLayoutEffect 和 useEffect的區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
