useEffect如何做到第一次不加载?

745 阅读1分钟

useUpdateEffect是一个自定义的React Hook,用于在组件更新时执行副作用,首次渲染不执行

实现过程:

  1. useUpdateEffect内部使用useEffectuseLayoutEffect来注册副作用函数。这两个Hook函数都接受一个回调函数和依赖项数组作为参数。当依赖项数组发生变化或组件更新时,副作用函数会被触发。
  2. 首次渲染 useUpdateEffect会标记一个标识,标识是首次渲染
  3. 组件更新时,useUpdateEffect会通过标识判断是否是首次渲染。如果是首次渲染,则不执行副作用函数;如果不是首次渲染,则执行副作用函数。

举个栗子:

GIF 2024-1-9 18-04-37.gif

可以看到,首次渲染只有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])