useLayoutEffect 与 useEffect都是react中用于处理副作用的钩子函数，它们的主要区别在于执行时机和对页面渲染的影响。
执行时机
useLayoutEffect 会在所有的 DOM 变化（包括 React 渲染产生的和由之前的 useLayoutEffect 产生的）之后，浏览器绘制屏幕内容之前同步执行。
这意味着在浏览器执行绘制内容前，useLayoutEffect 内的代码已经运行并可能对 DOM 产生了影响。
因此，如果你需要在浏览器绘制内容前进行某些操作（如测量 DOM 元素的尺寸或位置，并据此进行调整），需要立即对DOM进行操作并确保用户看到一致界面的情况，useLayoutEffect 是合适的选择。
相比之下，useEffect 则会在浏览器绘制内容后异步执行。
这意味着它不会阻塞浏览器绘制更新到屏幕上的过程，而是在更新完成后才处理副作用。
这种设计允许 React 首先确保用户界面是最新的，然后才处理可能的副作用。
一般用于数据获取、订阅事件、手动修改DOM等不会直接影响页面布局和视觉呈现的操作。
对页面渲染的影响
useEffect：由于是异步执行，不会阻塞页面的渲染，适合处理较为耗时的操作，但如果在副作用函数中包含了对DOM的操作，可能会出现页面闪烁或者用户看到不一致的界面。
useLayoutEffect：由于是同步执行，会立即更新DOM，确保用户看到的是一致的界面，但可能会导致页面渲染的性能问题，特别是在大型组件树中使用时，可能会引起页面卡顿或闪烁。
