寫在前面

React 提供的虛擬 DOM 和高效的 Diff 算法的完美搭配，實現了對 DOM 最小粒度的更新。在大多數情況下，React 對 DOM 的渲染效率可以滿足我們的開發需求。但是個別復雜業務場景下，性能問題在所難免，我們需要采取一些措施來提升性能，其中 React 組件的渲染性能優化很重要的一點就是避免不必要的渲染。

render 做了什么事情

• Diffing

React 將 render 函數返回的虛擬 DOM 樹與老的進行比較，從而確定 DOM 要不要更新、怎么更新。盡管React使用高度優化的算法進行 diff ，但是這個過程仍然會損耗性能。比方說在 DOM 樹很大的說話，遍歷兩棵樹進行各種比對還是相當耗性能的，特別是在頂層 setState 一個微小的修改，默認會去遍歷整棵樹，然而 JQuery 一行代碼就可以搞定。

對比可能挫一點的手動操作 DOM，diff 上的性能損耗讓 React 贏不了。換句話說 React 提供了一套方便的 DOM 更新機制，非常方便性能也 OK。

• Reconciliation

根據 diff 的結果來更新 DOM 樹，來掛載或卸載DOM節點，同樣會損耗性能，這部分不做過多闡述，感興趣的同學可以移步文檔 reconciliation 。

什么時候 render 會被調用

• 組件掛載的時候

React 組件構建并將 DOM 元素插入頁面的過程稱為掛載。

• setState 方法被調用的時候

但是執行 setState 的時候一定會重新渲染嗎？答案是不一定。當 setState 傳入 null 的時候，并不會觸發 render ，不信的同學可以試一下下面的 demo

class App extends React.Component { 
  state = { 
    a: 1 
  }; 
 
  render() { 
    console.log("render"); 
    return ( 
      <> 
        <p>{this.state.a}</p> 
        <button 
          onClick={() => { 
            this.setState({ a: 1 }); // 這里并沒有改變 a 的值 
          }} 
        > 
          Click me 
        </button> 
        <button onClick={() => this.setState(null)}>setState null</button> 
        <Child /> 
      </> 
    ); 
  } 
} 

• 父組件重新渲染

只要父組件重新渲染了，即使傳入子組件的 props 未發生變化，那么子組件也會重新渲染。

我們對上面的 demo 進行稍微的修改，可以看出當點擊按鈕的時候， Child 組件的 props 并沒有發生變化，但是也觸發了 render 方法。

const Child = () => { 
  console.log("child render"); 
  return <div>child</div>; 
}; 
 
class App extends React.Component { 
  state = { 
    a: 1 
  }; 
 
  render() { 
    console.log("render"); 
    return ( 
      <> 
        <p>{this.state.a}</p> 
        <button 
          onClick={() => { 
            this.setState({ a: 1 }); 
          }} 
        > 
          Click me 
        </button> 
        <button onClick={() => this.setState(null)}>setState null</button> 
        <Child /> 
      </> 
    ); 
  } 
} 

我們能做什么？

上文描述的 React 組件渲染機制其實是一種較好的做法，很好地避免了在每一次狀態更新之后，需要去手動執行重新渲染的相關操作。魚和熊掌不可兼得，帶來方便的同時也會存在一些問題，當子組件過多或者組件的層級嵌套過深時，因為反反復復重新渲染狀態沒有改變的組件，可能會增加渲染時間又會影響用戶體驗，此時就需要對 React 的 render 進行優化。

上面說了不必要的 render 會帶來性能問題，因此我們的主要優化思路就是減少不必要的 render。

在 React 類組件中，利用 shouldComponentUpdate 或者 PureComponent 來減少因為父組件更新而觸發子組件的render，從而達到目的。

shouldComponentUpdate 來決定是否組件是否重新渲染，如果不希望組件重新渲染，返回 false 即可。

你真的了解 PureComponent 嗎？

在 React 中 PureComponet 的源碼為

if (this._compositeType === CompositeTypes.PureClass) { 
  shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState); 
} 

看函數名就能夠理解，PureComponet 通過對 props 和 state的淺比較結果來實現 shouldComponentUpdate，當對象包含復雜的數據結構時，可能就不靈了，對象深層的數據已改變卻沒有觸發 render。

看到這里，順便看一下 shallowEqual 是如何實現的。

const hasOwnProperty = Object.prototype.hasOwnProperty; 
 
/** 
 * is 方法來判斷兩個值是否是相等的值，為何這么寫可以移步 MDN 的文檔，本文不做過多的闡述 
 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is 
 */ 
function is(x: mixed, y: mixed): boolean { 
  if (x === y) { 
    return x !== 0 || y !== 0 || 1 / x === 1 / y; 
  } else { 
    return x !== x && y !== y; 
  } 
} 
 
/** 
 *  
 */ 
function shallowEqual(objA: mixed, objB: mixed): boolean { 
  // 首先對基本類型進行比較 
  if (is(objA, objB)) { 
    return true; 
  } 
 
  if (typeof objA !== 'object' || objA === null || 
      typeof objB !== 'object' || objB === null) { 
    return false; 
  } 
 
  const keysA = Object.keys(objA); 
  const keysB = Object.keys(objB); 
 
  // 長度不相等直接返回false 
  if (keysA.length !== keysB.length) { 
    return false; 
  } 
 
  // key相等的情況下，再去循環比較 
  for (let i = 0; i < keysA.length; i++) { 
    if ( 
      !hasOwnProperty.call(objB, keysA[i]) || 
      !is(objA[keysA[i]], objB[keysA[i]]) 
    ) { 
      return false; 
    } 
  } 
 
  return true; 
} 

函數組件怎么辦

那么現在問題來了，函數組件并沒有 shouldComponentUpdate 這個生命周期，有沒有什么辦法可以避免不必要的 render。

利用高階組件

除了把函數組件轉成類組件，還可以利用高階組件，封裝一個類似 PureComponet 的功能

const shouldComponentUpdate = arePropsEqual => BaseComponent => { 
  class ShouldComponentUpdate extends React.Component { 
    shouldComponentUpdate(nextProps) { 
      return arePropsEqual(this.props, nextProps) 
    } 
 
    render() { 
      return <BaseComponent {...this.props} /> 
    } 
  } 
 
  ShouldComponentUpdate.displayName = `Pure(${BaseComponent.displayName})`; 
  return ShouldComponentUpdate; 
} 
 
const Pure = BaseComponent => { 
  const hoc = shouldComponentUpdate( 
      (props, nextProps) => !shallowEqual(props, nextProps) 
  ) 
 
  return hoc(BaseComponent); 
} 

使用 Pure 高階組件的時候，只需要對我們的子組件進行裝飾即可。

import React from 'react'; 
 
const Child = (props) => <div>{props.name}</div>; 
 
export default Pure(Child); 

使用 React.memo

React.memo 是 React 16.6 新的一個API，用來緩存組件的渲染，避免不必要的更新，其實也是一個高階組件，與 PureComponent 十分類似，與 PureComponent 不同的是， React.memo 只能用于函數組件

• 基本用法

import { memo } from 'react'; 
 
function Button(props) { 
  // Component code 
} 
 
export default memo(Button); 

• 高級用法

默認情況下其只會對 props 做淺層對比，遇到層級比較深的復雜對象時，表示力不從心了。對于特定的業務場景，可能需要類似 shouldComponentUpdate 這樣的 API，這時通過 memo 的第二個參數來實現。

function arePropsEqual(prevProps, nextProps) { 
  // your code 
  return prevProps === nextProps; 
} 
 
export default memo(Button, arePropsEqual); 

注意：

與 shouldComponentUpdate 不同的是， arePropsEqual 返回 true 時，不會觸發 render，如果返回 false ，則會。而 shouldComponentUpdate 剛好與其相反。

合理拆分組件

微服務的核心思想是：以更輕、更小的粒度來縱向拆分應用，各個小應用能夠獨立選擇技術、發展、部署。我們在開發組件的過程中也能用到類似的思想。試想當一個整個頁面只有一個組件時，無論哪處改動都會觸發整個頁面的重新渲染，去 diffing 和 reconciliation 整個頁面。在對組件進行拆分之后，render 的粒度更加精細，性能也能得到一定的提升。

總結

本文主要介紹了如何減少不必要的 render 來提升 React 的性能。在實際開發過程中，前端性能問題可能并不常見，隨著業務的復雜度增加，遇到性能問題的概率也會隨之增加。

• 減少 render 的次數 類組件可以使用 shouldComponentUpdate 或 PureComponent，函數組件可以利用高級組件的特性或者 React.memo
• 對組件進行合理的拆分

在摸索這些解決方案的同時，我們能夠學習到諸多經典的編程思想，從而更加合理的運用框架、技術解決業務問題。