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

React useCallback詳細(xì)使用教程

 更新時(shí)間:2022年11月10日 14:34:35   作者:Kobe_G  
useCallback是react中比較重要的一個(gè)hook,useCallback 用來返回一個(gè)函數(shù),在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用

一、useCallback的作用

usecallback不是用來解決組件中有過多內(nèi)部函數(shù)導(dǎo)致的性能問題:

1.我們要知道,js創(chuàng)建一個(gè)函數(shù)的成本是非常小的,這點(diǎn)計(jì)算對(duì)于計(jì)算機(jī)來說是小case

2.其實(shí)使用useCallback會(huì)產(chǎn)成額外的性能:對(duì)deps的判斷

3.其實(shí)每次組件重新渲染時(shí),都無所謂避免重新創(chuàng)建內(nèi)部函數(shù),因?yàn)榧词箄seCallback的deps沒有變,它也會(huì)重新創(chuàng)建內(nèi)部函數(shù)作為useCallback的實(shí)參

那么,它的作用到底是什么?useCallback的作用其實(shí)是用來避免子組件不必要的reRender:

首先,假如我們不使用useCallback,在父組件中創(chuàng)建了一個(gè)名為handleClick的事件處理函數(shù),根據(jù)需求我們需要把這個(gè)handleClick傳給子組件,當(dāng)父組件中的一些state變化后(這些state跟子組件沒有關(guān)系),父組件會(huì)reRender,然后會(huì)重新創(chuàng)建名為handleClick函數(shù)實(shí)例,并傳給子組件,這時(shí)即使用React.memo把子組件包裹起來,子組件也會(huì)重新渲染,因?yàn)閜rops已經(jīng)變化了,但這個(gè)渲染是無意義的

如何優(yōu)化呢?這時(shí)候就可以用useCallback了,我們用useCallback把函數(shù)包起來之后,在父組件中只有當(dāng)deps變化的時(shí)候,才會(huì)創(chuàng)建新的handleClick實(shí)例,子組件才會(huì)跟著reRender(注意,必須要用React.memo把子組件包起來才有用,否則子組件還是會(huì)reRender。React.memo是類似于class組件中的Pure.Component的作用)

對(duì)于這種deps不是經(jīng)常變化的情況,我們用useCallback和React.memo的方式可以很好地避免子組件無效的reRender。但其實(shí)社區(qū)中對(duì)這個(gè)useCallback的使用也有爭(zhēng)議,比如子組件中只是渲染了幾個(gè)div,沒有其他的大量計(jì)算,而瀏覽器去重新渲染幾個(gè)dom的性能損耗其實(shí)也是非常小的,我們花了這么大的勁,使用了useCallback和React.memo,換來的收益很小,所以一些人認(rèn)為就不用useCallback,就讓瀏覽器去重新渲染好了。至于到底用不用,此處不深入討論,我的建議是當(dāng)子組件中的dom數(shù)量很多,或者有一些大量的計(jì)算操作,是可以進(jìn)行這樣的優(yōu)化的。

以上都是討論的deps不會(huì)經(jīng)常改變的情況的優(yōu)化,而很多時(shí)候useCallback中的deps數(shù)組中的變量是會(huì)經(jīng)常改變的,這個(gè)時(shí)候我們用useCallback已經(jīng)沒啥意義了,反而會(huì)造成性能損耗(deps判斷)。有沒有什么辦法可以讓子組件不重新渲染,也能拿到父組件中handleClick函數(shù)中的最新state值呢?下面我們討論useRef,useReducer,usePersistFn這三種解決方法

二、useRef解決方案

為了讓子組件不進(jìn)行reRender,我們必須保證

1.父組件不會(huì)重新創(chuàng)建handleClick函數(shù)實(shí)例

2.handleClick函數(shù)能拿到最新的state

使用useRef

const [text, setText] = useState('Initial value');
const textRef = useRef(text);
const handleClick= useCallback(() => {
     console.log(textRef.current);
 }, []); 
 useEffect(() => {
     console.log('update text')
     textRef.current = text;
 }, [text])

textRef在每次reRender時(shí)不會(huì)改變,這樣我們把handleClick傳給子組件,handleClick函數(shù)中每次都能拿到父組件中最新的state

三、useReducer解決方案

使用useReducer

function reducer(state, action) {
    switch(action.type) {
        case 'update':
            return action.preload;
        case 'childComponent':
            // 要執(zhí)行的函數(shù)  
            return state;     
    }
}
export default function Index() { // 父組件
    const [state, dispatch] = useReducer(reducer, 'Initial value');
    return (
        <>
            <input value={state} onChange={(e) => dispatch({
                type: 'update', 
                preload: e.target.value
            })} />
            <ChildComponent dispatch={dispatch} />
        </>
    )
}
//在 ChildComponent中,拿到dispatch,通過dispatch({type: 'childComponent' })的方式調(diào)用

dispatch自帶memoize,所以子組件不會(huì)進(jìn)行 re-render

四、usePersistFn解決方案

usePersistFn是aooks庫(kù)中的一個(gè)鉤子函數(shù),它接收一個(gè)函數(shù),返回一個(gè)永遠(yuǎn)不變的函數(shù)引用,在這個(gè)函數(shù)中每次都能拿到最新的state值,看看usePersistFn的源碼:

function usePersistFn(fn) {
  const fnRef = useRef(fn);
  fnRef.current = fn;
  const persistFn = useRef();
  if (!persistFn.current) {
    persistFn.current = function (...args) {
      return fnRef.current.apply(this, args);
    };
  }
  return persistFn.crrent;
}

這里它用了兩個(gè)useRef,保證返回的函數(shù)引用不變,并且每次函數(shù)內(nèi)部能拿到最新的state。

這里可以用useRef和useCallback到達(dá)同樣的效果:

function usePersistFn(fn) {
  const fnRef = useRef();
  fnRef.current = fn; 
  const persist= useCallback((...rest) => {
     return fnRef.current(...rest);
  }, []);
  return persist
}

這種方法和上面的useRef解決方案差不多,只是封裝了起來而已

另外,本文介紹一下useContext使用的問題和優(yōu)化:

問題:當(dāng)context中的值改變時(shí),只要使用useContext訂閱了context的組件,不管該組件用到的state改不改變,該組件都會(huì)reRender,此時(shí)用React.memo是沒有辦法優(yōu)化的。

優(yōu)化:

1.拆分context,把經(jīng)常改變的數(shù)據(jù)和不經(jīng)常改變的數(shù)據(jù)拆分開,在只使用穩(wěn)定數(shù)據(jù)的組件中,我們只使用stableContext

2.使用useMemo

const {state}= useContext(AppContext);
return useMemo(() => <span>data:{state.depData}</span>, [state.depData]);

3.如何有效減少使用useContext導(dǎo)致的不必要渲染

到此這篇關(guān)于React useCallback詳細(xì)使用教程的文章就介紹到這了,更多相關(guān)React useCallback內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • react循環(huán)數(shù)據(jù)(列表)的實(shí)現(xiàn)

    react循環(huán)數(shù)據(jù)(列表)的實(shí)現(xiàn)

    這篇文章主要介紹了react循環(huán)數(shù)據(jù)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • React?Native?中實(shí)現(xiàn)倒計(jì)時(shí)功能

    React?Native?中實(shí)現(xiàn)倒計(jì)時(shí)功能

    這篇文章主要介紹了React?Native中實(shí)現(xiàn)倒計(jì)時(shí)功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • React反向代理與CSS模塊化的使用案例

    React反向代理與CSS模塊化的使用案例

    這篇文章主要介紹了React反向代理與CSS模塊化的使用案例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2023-02-02
  • 淺談react受控組件與非受控組件(小結(jié))

    淺談react受控組件與非受控組件(小結(jié))

    本篇文章主要介紹了淺談react受控組件與非受控組件(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-02-02
  • React 實(shí)現(xiàn)表單組件的示例代碼

    React 實(shí)現(xiàn)表單組件的示例代碼

    本文主要介紹了React 實(shí)現(xiàn)表單組件的示例代碼,支持包括輸入狀態(tài)管理,表單驗(yàn)證,錯(cuò)誤信息展示,表單提交,動(dòng)態(tài)表單元素等功能,具有一定的參考價(jià)值,感興趣的可以了解一下
    2024-07-07
  • React useImperativeHandle處理組件狀態(tài)和生命周期用法詳解

    React useImperativeHandle處理組件狀態(tài)和生命周期用法詳解

    React Hooks 為我們提供了一種全新的方式來處理組件的狀態(tài)和生命周期,useImperativeHandle是一個(gè)相對(duì)較少被提及的Hook,但在某些場(chǎng)景下,它是非常有用的,本文將深討useImperativeHandle的用法,并通過實(shí)例來加深理解
    2023-09-09
  • React中的useState和setState的執(zhí)行機(jī)制詳解

    React中的useState和setState的執(zhí)行機(jī)制詳解

    這篇文章主要介紹了React中的useState和setState的執(zhí)行機(jī)制,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 在react-router4中進(jìn)行代碼拆分的方法(基于webpack)

    在react-router4中進(jìn)行代碼拆分的方法(基于webpack)

    這篇文章主要介紹了在react-router4中進(jìn)行代碼拆分的方法(基于webpack),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-03-03
  • React的組件協(xié)同使用實(shí)現(xiàn)方式

    React的組件協(xié)同使用實(shí)現(xiàn)方式

    這篇文章主要介紹了React的組件協(xié)同使用,文中給大家提到在React開發(fā)中,有哪些場(chǎng)景的組件協(xié)同?又如何去實(shí)現(xiàn)組件的協(xié)同使用呢?本文都給大家提到,感興趣的朋友跟隨小編一起看看吧
    2021-09-09
  • react-beautiful-dnd 實(shí)現(xiàn)組件拖拽功能

    react-beautiful-dnd 實(shí)現(xiàn)組件拖拽功能

    這篇文章主要介紹了react-beautiful-dnd 實(shí)現(xiàn)組件拖拽功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-08-08

最新評(píng)論