useLayoutEffect
和useEffect
是React中常用的两个Hook,它们的主要区别在于触发时机。
-
useEffect
会在渲染完成后异步执行,不会阻塞浏览器的绘制操作。它适用于需要在组件渲染后执行副作用的情况,例如数据的获取、订阅事件等。它不会阻止屏幕更新,因此可能会导致渲染的一次跳跃,用户可能会在页面渲染完成后才看到最终效果。 -
useLayoutEffect
的触发时机稍早于useEffect
,在浏览器执行绘制之前同步执行。它适用于需要在DOM更新之后同步执行副作用的情况,例如获取DOM元素的尺寸、位置等。由于它会在页面渲染之前执行,因此可以阻止屏幕更新,确保副作用的执行不会引起渲染跳跃,提供更流畅的用户体验。
需要注意的是,由于useLayoutEffect
会在DOM操作之后同步执行,如果执行的操作非常耗时,则可能导致页面响应变慢。在大多数情况下,使用useEffect
即可满足需求,只有在确实需要在DOM更新后立即执行副作用时才考虑使用useLayoutEffect
。
应用useLayoutEffect
的场景,比如:
React.useLayoutEffect(() => {// 环形图自适应宽度设置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);}};// 初始时需要触发resize,否则会有样式兼容问题resizePieWidth();const onResize = debounce(() => {resizePieWidth();}, 50);window.addEventListener('resize', onResize);return () => {window.removeEventListener('resize', onResize);};});