useEffect 和 useLayoutEffect 是 React 中的两个 Hook 函数，用于在函数组件中处理副作用。 它们的主要区别在于执行时机不同： useEffect 的回调函数在浏览器绘制完成后异步执行，即在组件渲染完成后执行。属于延迟执行，不会阻塞浏览器更新。 在组件渲染任务调度函数结束后，在单独调用一次任务调度函数，所以effect的调用可以单独执行，不会和组件渲染任务

在介绍这两个hooks之前。让我们先对比一下useEffect、useLayoutEffect、useInsertionEffect 执行时机： useEffect 在组件渲染完成后执行，属于异步执行。useInsertionEffect 在组件渲染并插入 DOM 后执行，也属于异步执行。useLayoutEffect 在组件渲染完成后立即同步执行，并在浏览器布局和绘制之前运行。 对 DOM

使用方式 这两个函数的使用方式其实非常简单，他们都接受一个函数一个数组，只有在数组里面的值改变的情况下才会再次执行 effect。所以对于使用方式我就不过多介绍了，不清楚的可以先参考官网 。 差异 useEffect 是异步执行的，而useLayoutEffect是同步执行的。useEffect 的执行时机是浏览器完成渲染之后，而 useLayoutEffect 的执行时机是浏览器把内容真正

使用方式 这两个函数的使用方式其实非常简单，他们都接受一个函数一个数组，只有在数组里面的值改变的情况下才会再次执行 effect。所以对于使用方式我就不过多介绍了，不清楚的可以先参考官网 。 差异 useEffect 是异步执行的，而useLayoutEffect是同步执行的。useEffect 的执行时机是浏览器完成渲染之后，而 useLayoutEffect 的执行时机是浏览器把内容真正

二者对比 useEffect()是在渲染被绘制到屏幕之后执行的，是异步的；useLayoutEffect()是在渲染之后但在屏幕更新之前执行的，是同步的。 二者均是等待jsx执行完毕后再执行，但useLayoutEffect()在useEffect()之前触发。 大部分情况下采用useEffect()，因为它的性能更好。但当你的useEffect中需要操作dom，并且会改变页面的样式，就需要