完美世界有声小说,兽性总裁的爱奴,盗墓笔记同人小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

奇怪的useMemo知識增加了

作為「性能優(yōu)化」手段，一般用useMemo緩存函數(shù)組件中比較消耗性能的計算結果：

成都創(chuàng)新互聯(lián)公司，為您提供成都網(wǎng)站建設、成都網(wǎng)站制作、網(wǎng)站營銷推廣、網(wǎng)站開發(fā)設計，對服務成都主動防護網(wǎng)等多個行業(yè)擁有豐富的網(wǎng)站建設及推廣經(jīng)驗。成都創(chuàng)新互聯(lián)公司網(wǎng)站建設公司成立于2013年,提供專業(yè)網(wǎng)站制作報價服務,我們深知市場的競爭激烈，認真對待每位客戶，為客戶提供賞心悅目的作品。與客戶共同發(fā)展進步，是我們永遠的責任！

 
 
   
  
  function App() {   
  
    const memoizedValue = useMemo(   
  
      () => computeExpensiveValue(a, b),   
  
      [a, b]   
  
    );   
  
    // ...   
  
  }

只有在依賴項改變后才會重新計算新的memoizedValue。

你有沒有想過，如果用useMemo緩存函數(shù)組件的返回值，會怎么樣呢?

舉個例子

我們有個全局context —— AppContext。

由于同學們偷懶，隨著項目的迭代，新增的context都選擇放在AppContext里，導致AppContext包含的內(nèi)容越來越多。

現(xiàn)在我們有個Tree組件，他會渲染一個很耗性能的大組件ExpensiveTree。

 
 
   
  
  function Tree() {   
  
    let appContextValue = useContext(AppContext);   
  
    let theme = appContextValue.theme;   
  
     
  
    return ;   
  
  }

該組件內(nèi)部依賴AppContext中的theme狀態(tài)。

由于AppContext中包含很多與theme無關的state，導致每次其他無關的state更新，Tree都會重新render，進而ExpensiveTree組件也重新render。

現(xiàn)在這個優(yōu)化任務交到了你手上，該怎么辦呢?

優(yōu)化ExpensiveTree

這時候，useMemo就能派上用場：

 
 
   
  
  function Tree() {   
  
    let appContextValue = useContext(AppContext);   
  
    let theme = appContextValue.theme;   
  
     
  
    return useMemo(() => {   
  
      return ;   
  
    }, [theme])   
  
  }

我們將返回的ExpensiveTree作為useMemo返回值，theme作為依賴。

這樣，即使AppContext改變導致Tree反復render，ExpensiveTree也只會在theme改變后render。

[[380080]]

原理解析

要理解這么做有效的原因，需要了解三點：

useMemo返回值是什么
函數(shù)組件的返回值是什么
React組件在什么時候render

回答第一個問題：useMemo會將第一個參數(shù)(函數(shù))的返回值保存在組件對應fiber中，只有在依賴項(第二個參數(shù))變化后才會重新調(diào)用第一個參數(shù)(函數(shù))計算一個新值。

回答第二個問題：函數(shù)組件的返回值是JSX對象。

同一個函數(shù)組件調(diào)用多次，返回的是多個「不同」的JSX對象(即使props未變，但JSX是新的引用)。

按照以上兩個回答，我們可以得出結論：

以上useMemo用法實際上在函數(shù)組件對應的fiber中緩存了一個完整的JSX對象

第三個問題，函數(shù)組件需要同時滿足如下條件才不會render：

1 oldProps === newProps

前后兩次更新props全等，注意是「全等」。

2 組件context沒有變化

3 workInProgress.type === current.type

組件更新前后fiber.type未變化，比如div沒有變?yōu)閜。

4 !includesSomeLane(renderLanes, updateLanes)

當前fiber上不存在更新，或者存在更新但優(yōu)先級低。

更詳細的解釋，可以參考這篇文章：React組件到底什么時候render?

當我們不使用useMemo包裹返回值，每次Tree render返回的都是全新的JSX對象。

所以對于ExpensiveTree，oldProps !== newProps。

再看2：ExpensiveTree內(nèi)部context沒變，滿足

再看3：ExpensiveTree更新前后type都是ExpensiveTree，滿足

再看4: ExpensiveTree內(nèi)沒有狀態(tài)更新，滿足

所以，當我們使用useMemo包裹ExpensiveTree后，當theme不變，每次Treerender后返回的都是同一個JSX對象，滿足第一條。

基于這個原因，ExpensiveTree不會render。

總結

這篇文章提到的useMemo用法，并未在官網(wǎng)文檔中體現(xiàn)，而是在#15156[1]中由Dan介紹。

相比Vue，React更靈活，開發(fā)過程中需要開發(fā)者注意更多細節(jié)。要完全了解React，可能需要學習一些源碼層面的知識。

參考資料

[1]#15156:

https://github.com/facebook/react/issues/15156#issuecomment-474590693

網(wǎng)站標題：奇怪的useMemo知識增加了
分享鏈接：http://www.fisionsoft.com.cn/article/ccsgihp.html

新聞中心

其他資訊