一、useCallback的作用

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

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

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

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

那么，它的作用到底是什么？useCallback的作用其實(shí)是用來(lái)避免子組件不必要的reRender：

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

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

對(duì)于這種deps不是經(jīng)常變化的情況，我們用useCallback和React.memo的方式可以很好地避免子組件無(wú)效的reRender。但其實(shí)社區(qū)中對(duì)這個(gè)useCallback的使用也有爭(zhēng)議，比如子組件中只是渲染了幾個(gè)div，沒(méi)有其他的大量計(jì)算，而瀏覽器去重新渲染幾個(gè)dom的性能損耗其實(shí)也是非常小的，我們花了這么大的勁，使用了useCallback和React.memo，換來(lái)的收益很小，所以一些人認(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)沒(méi)啥意義了，反而會(huì)造成性能損耗（deps判斷）。有沒(méi)有什么辦法可以讓子組件不重新渲染，也能拿到父組件中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，通過(guò)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解決方案差不多，只是封裝了起來(lái)而已

另外，本文介紹一下useContext使用的問(wèn)題和優(yōu)化：

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

優(yōu)化：

1.拆分context，把經(jīng)常改變的數(shù)據(jù)和不經(jīng)常改變的數(shù)據(jù)拆分開(kāi)，在只使用穩(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)文章希望大家以后多多支持腳本之家！

最新評(píng)論