[React]常见Hook实现之useUpdateEffect

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

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

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

function useUpdateEffect(effect, dependencies) {const isFirstRender = useRef(true);useEffect(() => {if (isFirstRender.current) {isFirstRender.current = false;} else {effect();}}, dependencies);
}