useUpdateEffect是一个自定义的React Hook,用于在组件更新时执行副作用,首次渲染不执行
实现过程:
useUpdateEffect内部使用useEffect或useLayoutEffect来注册副作用函数。这两个Hook函数都接受一个回调函数和依赖项数组作为参数。当依赖项数组发生变化或组件更新时,副作用函数会被触发。- 首次渲染
useUpdateEffect会标记一个标识,标识是首次渲染 - 组件更新时,
useUpdateEffect会通过标识判断是否是首次渲染。如果是首次渲染,则不执行副作用函数;如果不是首次渲染,则执行副作用函数。
举个栗子:
可以看到,首次渲染只有useEffect会打印count,只有count变化时,useUpdateEffect才会打印出count
<div>count:{count}</div>
<Button onClick={()=>setCount(count+1)}>加1</Button>
const useUpdateEffect = (fn: any, value: any) => {
const didMountRef = useRef(false);
useEffect(() => {
if (didMountRef.current) fn();
else didMountRef.current = true;
}, value);
};
useUpdateEffect(() => {
console.log('useUpDateEffect的count:',count)
}, [count]);
useEffect(()=>{
console.log('useEffect的count:',count)
},[count])