有些場(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)文章

jenkins分環(huán)境部署vue/react項(xiàng)目的方法步驟
這篇文章主要介紹了jenkins分環(huán)境部署vue/react項(xiàng)目的方法，本文分步驟給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-02-02
React簡(jiǎn)便獲取經(jīng)緯度信息的方法詳解
在現(xiàn)代的Web應(yīng)用程序中,獲取用戶(hù)的地理位置信息是一項(xiàng)常見(jiàn)的需求,本文我們將介紹如何在React應(yīng)用程序中簡(jiǎn)便地獲取用戶(hù)的經(jīng)緯度信息,需要的可以參考下
2023-11-11
React?Fiber原理深入分析
Fiber可以理解為一個(gè)執(zhí)行單元，每次執(zhí)行完一個(gè)執(zhí)行單元，React?Fiber就會(huì)檢查還剩多少時(shí)間，如果沒(méi)有時(shí)間則將控制權(quán)讓出去，然后由瀏覽器執(zhí)行渲染操作，這篇文章主要介紹了React?Fiber架構(gòu)原理剖析,需要的朋友可以參考下<BR>
2023-01-01
淺談React和Redux的連接react-redux
本篇文章主要介紹了淺談React和Redux的連接react-redux，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
詳解如何封裝和使用一個(gè)React鑒權(quán)組件
JavaScript?和?React?提供了靈活的事件處理機(jī)制,特別是通過(guò)利用事件的捕獲階段來(lái)阻止事件傳播可以實(shí)現(xiàn)精細(xì)的權(quán)限控制,本文將詳細(xì)介紹這一技術(shù)的應(yīng)用,并通過(guò)實(shí)踐案例展示如何封裝和使用一個(gè)?React?鑒權(quán)組件,需要的可以參考下
2024-03-03
ReactNative列表ListView的用法
本篇文章主要介紹了ReactNative列表ListView的用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
解決react-connect中使用forwardRef遇到的問(wèn)題
這篇文章主要介紹了解決react-connect中使用forwardRef遇到的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
react組件中過(guò)渡動(dòng)畫(huà)的問(wèn)題解決
這篇文章主要為大家介紹了react組件中過(guò)渡動(dòng)畫(huà)的問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
詳解react應(yīng)用中的DOM DIFF算法
這篇文章主要介紹了react應(yīng)用中的DOM DIFF算法，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下
2021-04-04
React傳值組件傳值之間的關(guān)系詳解
這篇文章主要介紹了React傳值組件傳值之間的關(guān)系詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08