快捷導(dǎo)航

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

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

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

先講點(diǎn)廢話

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

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

??來(lái)看看效果

可以看到，第一次只有useEffect會(huì)打印count，只有count變化時(shí)，useUpdateEffect才會(huì)打印出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;

??參考

有興趣的小伙伴可以去看，react-use 和 ahooks 的源碼，學(xué)習(xí)前輩們優(yōu)雅的代碼??。

以上就是每天一個(gè)hooks學(xué)習(xí)之useUpdateEffect的詳細(xì)內(nèi)容，更多關(guān)于hooks學(xué)習(xí)useUpdateEffect的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

React?組件中?State?的定義、使用及正確使用方式
本文詳細(xì)介紹了React組件中的state概念,包括其定義、使用方式以及如何正確更新state,通過(guò)ES6和ES7類組件的示例,展示了如何在React中定義和使用state,感興趣的朋友跟隨小編一起看看吧
2024-11-11
React之echarts-for-react源碼解讀
這篇文章主要介紹了React之echarts-for-react源碼解讀,echarts-for-react的源碼非常精簡(jiǎn)，本文將針對(duì)主要邏輯分析介紹，需要的朋友可以參考下
2022-10-10
淺談react-router@4.0 使用方法和源碼分析
這篇文章主要介紹了淺談react-router@4.0 使用方法和源碼分析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-06-06
react裝飾器與高階組件及簡(jiǎn)單樣式修改的操作詳解
這篇文章主要介紹了react裝飾器與高階組件及簡(jiǎn)單樣式修改的操作，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2022-09-09
React實(shí)踐之Tree組件的使用方法
本篇文章主要介紹了React實(shí)踐之Tree組件的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
如何使用Redux Toolkit簡(jiǎn)化Redux
redux-toolkit是目前redux官方推薦的編寫(xiě)redux邏輯的方法，針對(duì)redux的創(chuàng)建store繁瑣、樣板代碼太多、依賴外部庫(kù)等問(wèn)題進(jìn)行了優(yōu)化，官方總結(jié)了四個(gè)特點(diǎn)是簡(jiǎn)易的/有想法的/強(qiáng)勁的/高效的，總結(jié)來(lái)看，就是更加的方便簡(jiǎn)單了
2022-12-12
React父組件數(shù)據(jù)實(shí)時(shí)更新了,子組件沒(méi)有更新的問(wèn)題
這篇文章主要介紹了React父組件數(shù)據(jù)實(shí)時(shí)更新了,子組件沒(méi)有更新的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
React-Native之截圖組件react-native-view-shot的介紹與使用小結(jié)
這篇文章主要介紹了React-Native之截圖組件react-native-view-shot的介紹與使用小結(jié),需本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，要的朋友可以參考下
2021-08-08
react:swr接口緩存案例代碼
useSWR 是一個(gè) React Hooks,是 HTTP 緩存庫(kù) SWR 的核心方法之一,SWR 是一個(gè)輕量級(jí)的 React Hooks 庫(kù),通過(guò)自動(dòng)緩存數(shù)據(jù)來(lái)實(shí)現(xiàn) React 的數(shù)據(jù)獲取,本文給大家介紹react:swr接口緩存案例詳解,感興趣的朋友一起看看吧
2023-11-11
React useEffect使用教程
useEffect是react v16.8新引入的特性。我們可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個(gè)函數(shù)的組合
2022-10-10