useEffect VS useLayoutEffect ｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天

在 React 中，useEffect 和 useLayoutEffect 是两个常用的 Hook。它们可用于在组件渲染后执行副作用操作。

二者的使用方式和行为非常相似，但是它们执行的时机不同，对组件渲染的阶段产生不同的影响

useEffect

useEffect 是在组件渲染后异步执行的 Hook，可以用来处理副作用操作，例如网络请求、DOM 操作、事件监听等。useEffect 接受一个函数和一个可选的依赖数组作为参数。这个函数会在组件渲染后异步执行，如果提供了依赖数组，那么只有依赖数组中的值变化时，useEffect 才会重新执行。这个 Hook 的一个重要特性是它不会阻塞组件的渲染过程，这意味着它执行的时机可能晚于 DOM 的更新。在某些情况下，这可能会导致视觉上的延迟或者其他问题。

useEffect(() => {
  // side effect
}, [dependency1, dependency2, ...])

传递给useEffect的函数可以返回一个清除函数。此函数将在组件卸载之前或再次执行函数之前执行。

useEffect(() => {
  // side effect
  return () => {
    // cleanup function
  }
}, [dependency])

useLayoutEffect

useLayoutEffect 也是在组件渲染后执行的 Hook，但是它是同步执行的，会在 DOM 更新之前执行。useLayoutEffect 可以用来进行 DOM 操作，例如测量 DOM 元素的大小和位置、手动更新布局等。useLayoutEffect 的使用方式和 useEffect 相同，接受一个函数和一个可选的依赖数组作为参数，这个函数会在组件渲染后同步执行，如果提供了依赖数组，那么只有依赖数组中的值变化时，useLayoutEffect 才会重新执行。由于 useLayoutEffect 是同步执行的，如果它执行的时间过长，可能会导致视觉上的卡顿或者其他问题。

useLayoutEffect(() => {
  // side effect
}, [dependency1, dependency2, ...]);

传递给useLayoutEffect的函数也可以返回一个清理函数。

useLayoutEffect(() => {
  // side effect
  return () => {
    // cleanup function
  }
}, [dependency]);

Differences

• useEffect和useLayoutEffect的主要区别在于，后者在组件渲染后同步执行，但在浏览器绘制屏幕之前执行。这意味着useLayoutEffect可用于对需要在用户看到屏幕之前应用的DOM进行更改。

通常只有在需要在用户看到屏幕之前应用更改的 DOM 时才使用 useLayoutEffect