剖析ahooks源码（五）：玩转useUpdateEffect和useUpdateLayoutEffect

2023-03-08 15:18:36

深入理解 useEffect、useUpdateEffect 和 useUpdateLayoutEffect

在 React 应用开发中，处理副作用是一个常见且至关重要的任务。useEffect hook 应运而生，为我们提供了在组件生命周期中指定副作用处理函数的能力。为了进一步优化组件更新后的副作用处理，ahooks 库引入了 useUpdateEffect 和 useUpdateLayoutEffect 这两个衍生 hook。本文将深入剖析这三个 hook，探讨它们的异同，并提供实际应用场景。

useEffect

useEffect hook 允许我们在组件挂载、更新或卸载时执行特定的副作用函数。它广泛应用于各种场景，例如：

更新组件状态
触发网络请求
更新组件样式
监听组件尺寸变化

useUpdateEffect

useUpdateEffect hook 在 useEffect 的基础上进行了优化，它只会在组件更新后触发副作用函数。这意味着它非常适合处理与组件状态更新相关的副作用，避免了不必要的开销。

useUpdateLayoutEffect

useUpdateLayoutEffect hook 与 useUpdateEffect 类似，但它会在组件更新后，且在浏览器完成布局更新之后触发副作用函数。它主要用于处理与组件布局相关的副作用，例如：

更新滚动条位置
改变组件的视觉外观

源码剖析

要深入理解这三个 hook 的内部原理，我们不妨直接剖析它们的源码：

useEffect

useEffect(() => {
  // 副作用函数
}, [deps]);

useUpdateEffect

const mountedRef = useRef(false);

useEffect(() => {
  if (!mountedRef.current) {
    mountedRef.current = true;
    return;
  }

  // 副作用函数
}, [deps]);

useUpdateLayoutEffect

const mountedRef = useRef(false);

useLayoutEffect(() => {
  if (!mountedRef.current) {
    mountedRef.current = true;
    return;
  }

  // 副作用函数
}, [deps]);

从源码中可以看到，useUpdateEffect 和 useUpdateLayoutEffect 都使用了一个内部 useRef 来跟踪组件是否已挂载，并在 useEffect 或 useLayoutEffect 的回调函数中进行判断，只有在组件已挂载的情况下才会执行副作用函数。

应用场景

useUpdateEffect 和 useUpdateLayoutEffect 的应用场景非常广泛，以下是几个常见例子：

useUpdateEffect