每天一個hooks學(xué)習(xí)之useUpdateEffect

更新時間：2023年05月09日 09:35:57 作者：jimmy_fx

這篇文章主要為大家介紹了每天一個hooks學(xué)習(xí)之useUpdateEffect使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

先講點(diǎn)廢話

useUpdateEffect 用法等同于 useEffect，但是會忽略首次執(zhí)行，只在依賴更新時執(zhí)行。

有些場景我們不想在首次渲染時就執(zhí)行 effect，比如搜索時，只在 keyword 變化時才調(diào)用 search 方法。這個hooks在平時工作中也用的比較多的，所以我們來寫寫它的源碼還是很有必要的??。

??來看看效果

可以看到，第一次只有useEffect會打印count，只有count變化時，useUpdateEffect才會打印出count

??源碼實(shí)現(xiàn)

import React, { useEffect, useRef } from 'react';
const useUpdateEffect = (
  effect: React.EffectCallback,
  deps: React.DependencyList,
) =&gt; {
  let isFirst = useRef(true);
  useEffect(() =&gt; {
    if (isFirst.current) {
      isFirst.current = false;
      return;
    }
    return effect();
  }, [deps]);
};

??完整demo源碼

import React, { useEffect, useRef } from 'react';
import { Button } from 'antd';
const useUpdateEffect = (
  effect: React.EffectCallback,
  deps: React.DependencyList,
) => {
  let isFirst = useRef(true);
  useEffect(() => {
    if (isFirst.current) {
      isFirst.current = false;
      return;
    }
    return effect();
  }, [deps]);
};
const Demo = () => {
  const [count, setCount] = React.useState(0);
  useEffect(() => {
    console.log('useEffect的count', count);
  }, [count]);
  useUpdateEffect(() => {
    console.log('useUpdateEffect的count', count);
  }, [count]);
  return (
    <>
      <div>Count: {count}</div>
      <Button type="primary" onClick={() => setCount(count + 1)}>
        點(diǎn)我+ 1
      </Button>
    </>
  );
};
export default Demo;