【React 】useLayoutEffect 和 useEffect的区别

useLayoutEffect和useEffect是React中常用的两个Hook，它们的主要区别在于触发时机。

1. useEffect会在渲染完成后异步执行，不会阻塞浏览器的绘制操作。它适用于需要在组件渲染后执行副作用的情况，例如数据的获取、订阅事件等。它不会阻止屏幕更新，因此可能会导致渲染的一次跳跃，用户可能会在页面渲染完成后才看到最终效果。

2. 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);};});