useEffect 与 useLayoutEffect 的区别
useEffect 与 useLayoutEffect 的区别
- useEffect和useLayoutEffect是处理副作用的React钩子函数，有以下区别
- 1. 执行时机不同
- 2. 对性能影响不同
- 3. 对渲染的影响不同：
- 4. 使用场景不同
- 使用建议
useEffect和useLayoutEffect是处理副作用的React钩子函数，有以下区别
1. 执行时机不同
- useEffect：在组件渲染到屏幕之后异步执行。这意味着它不会阻塞浏览器的绘制和更新，适用于大多数与数据获取、订阅事件、手动修改
DOM等不会直接影响页面布局和视觉呈现的操作。 - useLayoutEffect：会在浏览器进行布局和绘制之前同步执行。useLayoutEffect中执行的操作会修改
DOM样式或结构，并且在浏览器绘制之前就完成这些修改，避免页面的重绘和回流带来的性能问题。注意：
useLayoutEffect是在DOM结构更新后、渲染前执行，在渲染时是同步执行，相当于有一个防抖效果
2. 对性能影响不同
- useEffect：由于是异步执行，不会阻塞页面的渲染，对用户交互的响应性影响较小，但如果副作用操作耗时较长，可能会在用户操作后有短暂的延迟才看到效果。
- useLayoutEffect：由于是同步执行，如果在其中执行的操作耗时较长，会阻塞页面的渲染，可能导致页面卡顿，影响用户体验。
3. 对渲染的影响不同：
- useEffect 的执行不会阻塞浏览器的渲染工作
- useLayoutEffect 的执行可能会阻塞浏览器的渲染，使用
useLayoutEffect时需要注意性能问题。
4. 使用场景不同
- 一般情况下，如果副作用操作不会影响页面的布局，建议使用
useEffect。例如发送网络请求获取数据、添加事件监听器、更新本地存储等。 - 如果副作用操作会影响页面的布局和视觉呈现，例如直接修改
DOM元素的样式、位置、大小等，为了避免页面的闪烁和重绘，建议用useLayoutEffect。useLayoutEffect会在浏览器进行布局和绘制之前同步执行。这意味着它可以在DOM更新后、浏览器绘制之前进行操作，从而避免由于异步的useEffect可能导致的闪烁现象。
使用建议
- 将直接影响页面布局和视觉呈现的操作放在
useLayoutEffect中，例如直接修改DOM元素的样式、位置、大小等。因为它会等待这些操作完成后再进行渲染，所以可以避免页面的闪烁。 - 减少
useLayoutEffect中执行的复杂或耗时操作。由于它是同步执行，如果操作过于耗时，可能会阻塞页面的渲染，导致卡顿。如果必须进行复杂计算或耗时操作，可以考虑将其拆分为异步操作，或者在操作完成后再进行必要的DOM更新。 - 精确管理依赖项，只将会影响布局的变量添加到依赖项数组中。这样可以避免不必要的
useLayoutEffect执行。