[React]常见Hook实现之useUpdateEffect

豆子前端2023-07-28 12:40

useUpdateEffect是一个自定义的React Hook，用于在组件更新时执行副作用。它的实现原理如下：

useEffect和useLayoutEffect：useUpdateEffect内部使用useEffect或useLayoutEffect来注册副作用函数。这两个Hook函数都接受一个回调函数和依赖项数组作为参数。当依赖项数组发生变化或组件更新时，副作用函数会被触发。
初始化阶段：在组件的初始化阶段（即首次渲染）时，useUpdateEffect会记录一个标记（flag），表示当前组件是首次渲染。
更新阶段：在组件的更新阶段，useUpdateEffect会判断当前是否是首次渲染。如果是首次渲染，则不执行副作用函数；如果不是首次渲染，则执行副作用函数。

通过这种方式，useUpdateEffect可以在组件更新时执行副作用函数，而在首次渲染时跳过执行。这在某些场景下很有用，例如当需要在组件首次渲染后执行一些初始化操作，而在后续更新时不再执行这些初始化操作。

js 复制代码

function useUpdateEffect(effect, dependencies) {
  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
    } else {
      effect();
    }
  }, dependencies);
}