熱身準備

useCallback和useMemo是一樣的東西，只是入?yún)⒂兴煌?/p>

useCallback緩存的是回調(diào)函數(shù)，如果依賴項沒有更新，就會使用緩存的回調(diào)函數(shù)；

useMemo緩存的是回調(diào)函數(shù)的return，如果依賴項沒有更新，就會使用緩存的return；

官網(wǎng)有這樣一段描述useCallback(fn, deps)相當于useMemo(() => fn, deps)。

所以這里，只以useCallback為例進行分析。

初始化mount

mountCallback

如果各位看官是系列文章第一篇開始看的，看到這里估計就無壓力，mountCallback就這幾行代碼，筆者沒有做精簡。

function mountCallback(callback, deps) {
  // 初始化hook結(jié)構(gòu)
  var hook = mountWorkInProgressHook();
  // 使用者傳進來的依賴數(shù)組
  var nextDeps = deps === undefined ? null : deps;
  // 以數(shù)組的形式將回調(diào)和依賴數(shù)組存儲到對應(yīng)fiber.memoizedState.hook.moeoizedState
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

更新 update

function updateCallback(callback, deps) {
  var hook = updateWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  var prevState = hook.memoizedState;
  if (prevState !== null) {
    if (nextDeps !== null) {
      var prevDeps = prevState[1];
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

updateCallback就這幾行代碼，沒有刪減，代碼意圖也很簡單，如果依賴數(shù)組deps沒有變化，或者deps=[]的情況下，會返回之前緩存的回調(diào)函數(shù)，否則就更新對應(yīng)fiber.memoizedState.hook.memoizedState并返回新的回調(diào)函數(shù)。

使用場景

就筆者的所見所聞，存在兩種極端情況，一種開發(fā)者在開發(fā)時，不管什么函數(shù)，什么數(shù)據(jù)都喜歡使用useCallback，useMemo進行一層包裹。還有一種開發(fā)者不管什么情況都不會考慮使用useCallback，useMemo。

不用說，這兩種做法都是有問題的。第一種做法，還不知道是之所以會出現(xiàn)這樣的問題，根本原因還是很多開發(fā)者并不明白這兩個hook的原理和使用場景。

首先，我們要明確函數(shù)組件在每一次更新時，都會執(zhí)行函數(shù)組件，函數(shù)組件內(nèi)部的所有方法，所有值都會重新聲明，重新計算。這兩個hook的出現(xiàn)就是為了優(yōu)化這種情況，避免不必要的浪費。而這兩個hook的做法就是通過將函數(shù)或者值存儲在對應(yīng)的fiber.memoizedState.hook.memoizedState上，在下次更新時，根據(jù)依賴項是否變化來決定是否要用緩存值，還是新的傳進來的值。

這時候可能有人疑惑既然都會更新，那我全部包裹起來有什么不好？筆者認為都進行包裹主要的問題是，如果一個函數(shù)足夠簡單，從新聲明可能性能消耗會比包裹后存儲在hook.memoizedState的消耗更小。

這里，筆者根據(jù)自己看源碼的心得，列舉下這兩個hook的使用場景：

• 如果子組件比較復(fù)雜，可以考慮使用useCallback進行包裹；
• 如果函數(shù)組件中某個值需要大量的計算才能得出，可以考慮使用useMemo進行包裹；
• 如果某個函數(shù)是子組件的props，可以考慮使用useCallback進行包裹（配合React.memo使用）；
• 自定義hooks中復(fù)雜邏輯可以考慮使用useCallback和useMemo進行包裹；

相關(guān)參考視頻講解：傳送門

總結(jié)

這兩個hook原理還是很簡單的，因為是系列文章，很多內(nèi)容和前面文章都重復(fù)了，所以導(dǎo)致這篇都沒啥能寫的了?？偨Y(jié)下原理：

這兩個hook的做法就是通過將函數(shù)或者值存儲在對應(yīng)的fiber.memoizedState.hook.memoizedState上，在下次更新時，根據(jù)依賴項是否變化來決定是要用緩存值，還是新的傳進來的值。

雖然useCallback和useMemo是為了優(yōu)化性能出現(xiàn)的，但是各位看官也不要盲目使用，畢竟這兩個hook本身也會帶來開銷。

看完這篇文章， 我們可以弄明白下面這幾個問題：

• useCallback和useMemo的區(qū)別？
• useCallback和useMemo的使用場景有哪些？
• useCallback和useMemo是做什么的？
• useCallback和useMemo是怎么實現(xiàn)優(yōu)化性能的？

熱身準備

useContext可以幫助我們跨越組件層級直接傳遞變量，避免了在每一個層級手動的傳遞 props 屬性，實現(xiàn)共享，要配合createContext使用。

createContext

createContext主要功能是創(chuàng)建一個context，提供Provider和Consumer。Provider主要將context內(nèi)容暴露出來，Consumer可以拿到對應(yīng)context的Provider暴露的內(nèi)容使用。

示例代碼：

export const Context = createContext(null)
<Context.Provider value='initialValue'>
  <Context.Consumer>
    {(v) => {      return <h2>{v}</h2>
    }}  </Context.Consumer>
</Context.Provider>

Provider

<Context.Provider>在渲染時，beginWork階段，會執(zhí)行

pushProvider(workInProgress, newValue);

它會將Provider的prop上的value字段存到context._currentValue中。

Consumer

<Context.Consumer>在渲染時，beginWork階段，會執(zhí)行

prepareToReadContext(workInProgress, renderLanes);
var newValue = readContext(context, newProps.unstable_observedBits);

通過上面代碼可以拿到Provider的prop上的value。

值得注意的是， Consumer標簽下包裹的必須是一個函數(shù)，如果不是函數(shù)會報錯。 Consumer會將拿到的value作為函數(shù)的參數(shù)傳入函數(shù)中去使用。如同上面示例代碼中獲取到的v。

useContext

useContext需要將createContext創(chuàng)建的Context作為參數(shù)進行調(diào)用。

值得一提的是，前面講的hook在初始化和更新時會有兩套不同函數(shù)執(zhí)行。但是在useContext只有一個，也就是useContext在初始化和更新時執(zhí)行的是一套代碼。

初始化mount&更新update

useContext在mount時主要會調(diào)用readContext函數(shù)：

function readContext(context, observedBits) {
  var contextItem = {
    context: context,  // 傳入的context
    observedBits: resolvedObservedBits,  // 觀察范圍（默認全部update)
    next: null
  };
  lastContextDependency = contextItem;
  currentlyRenderingFiber.dependencies = {
    lanes: NoLanes,
    firstContext: contextItem,
    responders: null
  };
  } else {
    // Append a new context item.    lastContextDependency = lastContextDependency.next = contextItem;
  }
  return  context._currentValue ;
}

精簡了下代碼，可以看到，readContext會創(chuàng)建一個contextItem并以鏈表的結(jié)構(gòu)記錄在對應(yīng)fiber.dependencies上，最后將Provider的prop上的value返回。

總結(jié)

useContext的原理類似于觀察者模式。Provider是被觀察者， Consumer和useContext是觀察者。當Provider上的值發(fā)生變化， 觀察者是可以觀察到的，從而同步信息給到組件。

主要使用場景就是多層級組件值的傳遞，如果值較多可以考慮配合useReducer使用。

看完這篇文章， 我們可以弄明白下面這個問題：

useContext的原理是什么？

到此這篇關(guān)于React源碼分析之useCallback與useMemo及useContext詳解的文章就介紹到這了,更多相關(guān)React useCallback useMemo useContext內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論