React Hooks: useEffect vs. useLayoutEffect - 详细比较 - 常规

useEffect 和 useLayoutEffect 都是 React 中的 Hook，用于处理副作用（side effects），例如数据获取、订阅、DOM 操作等。它们的主要区别在于触发时机的不同。

useEffect: useEffect 在组件渲染到屏幕后触发，即在浏览器完成绘制后运行副作用代码。它不会阻塞浏览器渲染，因此对于大多数副作用来说是足够的。在函数组件每次渲染时都会运行 useEffect 的副作用代码。
useLayoutEffect: useLayoutEffect 和 useEffect 的功能基本相同，但触发时机略有不同。useLayoutEffect 在组件完成渲染后、浏览器绘制之前触发，即在浏览器渲染前运行副作用代码。由于它在浏览器渲染前运行，因此可以在这个阶段同步读取 DOM 布局并同步修改 DOM。但需要注意的是，使用 useLayoutEffect 可能会导致页面渲染的性能下降，因为它阻塞浏览器渲染。

综上所述，一般情况下应优先使用 useEffect，只有在需要在浏览器绘制前执行 DOM 操作时才考虑使用 useLayoutEffect。