欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

每天一個hooks學習之useUpdateEffect

 更新時間:2023年05月09日 09:35:57   作者:jimmy_fx  
這篇文章主要為大家介紹了每天一個hooks學習之useUpdateEffect使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

先講點廢話

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

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

??來看看效果

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

??源碼實現(xiàn)

import React, { useEffect, useRef } from 'react';
const useUpdateEffect = (
  effect: React.EffectCallback,
  deps: React.DependencyList,
) => {
  let isFirst = useRef(true);
  useEffect(() => {
    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)}>
        點我+ 1
      </Button>
    </>
  );
};
export default Demo;

??參考

有興趣的小伙伴可以去看,react-useahooks 的源碼,學習前輩們優(yōu)雅的代碼??。

以上就是每天一個hooks學習之useUpdateEffect的詳細內容,更多關于hooks學習useUpdateEffect的資料請關注腳本之家其它相關文章!

相關文章

  • jenkins分環(huán)境部署vue/react項目的方法步驟

    jenkins分環(huán)境部署vue/react項目的方法步驟

    這篇文章主要介紹了jenkins分環(huán)境部署vue/react項目的方法,本文分步驟給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-02-02
  • React簡便獲取經緯度信息的方法詳解

    React簡便獲取經緯度信息的方法詳解

    在現(xiàn)代的Web應用程序中,獲取用戶的地理位置信息是一項常見的需求,本文我們將介紹如何在React應用程序中簡便地獲取用戶的經緯度信息,需要的可以參考下
    2023-11-11
  • React?Fiber原理深入分析

    React?Fiber原理深入分析

    Fiber可以理解為一個執(zhí)行單元,每次執(zhí)行完一個執(zhí)行單元,React?Fiber就會檢查還剩多少時間,如果沒有時間則將控制權讓出去,然后由瀏覽器執(zhí)行渲染操作,這篇文章主要介紹了React?Fiber架構原理剖析,需要的朋友可以參考下<BR>
    2023-01-01
  • 淺談React和Redux的連接react-redux

    淺談React和Redux的連接react-redux

    本篇文章主要介紹了淺談React和Redux的連接react-redux,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • 詳解如何封裝和使用一個React鑒權組件

    詳解如何封裝和使用一個React鑒權組件

    JavaScript?和?React?提供了靈活的事件處理機制,特別是通過利用事件的捕獲階段來阻止事件傳播可以實現(xiàn)精細的權限控制,本文將詳細介紹這一技術的應用,并通過實踐案例展示如何封裝和使用一個?React?鑒權組件,需要的可以參考下
    2024-03-03
  • ReactNative列表ListView的用法

    ReactNative列表ListView的用法

    本篇文章主要介紹了ReactNative列表ListView的用法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • 解決react-connect中使用forwardRef遇到的問題

    解決react-connect中使用forwardRef遇到的問題

    這篇文章主要介紹了解決react-connect中使用forwardRef遇到的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • react組件中過渡動畫的問題解決

    react組件中過渡動畫的問題解決

    這篇文章主要為大家介紹了react組件中過渡動畫的問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • 詳解react應用中的DOM DIFF算法

    詳解react應用中的DOM DIFF算法

    這篇文章主要介紹了react應用中的DOM DIFF算法,幫助大家更好的理解和學習使用react,感興趣的朋友可以了解下
    2021-04-04
  • React傳值 組件傳值 之間的關系詳解

    React傳值 組件傳值 之間的關系詳解

    這篇文章主要介紹了React傳值 組件傳值 之間的關系詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-08-08

最新評論