性能！！讓你的 React 組件跑得再快一點

時間 2020-01-07

原文原文鏈接

本文首發於政採雲前端團隊博客：性能！！讓你的 React 組件跑得再快一點

性能和渲染（Render）正相關

React 基於虛擬 DOM 和高效 Diff 算法的完美配合，實現了對 DOM 最小粒度的更新。大多數狀況下，React 對 DOM 的渲染效率足以咱們的業務平常。但在個別複雜業務場景下，性能問題依然會困擾咱們。此時須要採起一些措施來提高運行性能，其很重要的一個方向，就是避免沒必要要的渲染（Render）。前端

渲染（Render）時影響性能的點

React 的處理 render 的基本思惟模式是每次一有變更就會去從新渲染整個應用。在 Virtual DOM 沒有出現以前，最簡單的方法就是直接調用 innerHTML。Virtual DOM 厲害的地方並非說它比直接操做 DOM 快，而是說無論數據怎麼變，都會盡可能以最小的代價去更新 DOM。React 將 render 函數返回的虛擬 DOM 樹與老的進行比較，從而肯定 DOM 要不要更新、怎麼更新。當 DOM 樹很大時，遍歷兩棵樹進行各類比對仍是至關耗性能的，特別是在頂層 setState 一個微小的修改，默認會去遍歷整棵樹。儘管 React 使用高度優化的 Diff 算法，可是這個過程仍然會損耗性能。react

渲染（Render）什麼時候會被觸發

○ 組件掛載

React 組件構建並將 DOM 元素插入頁面的過程稱爲掛載。當組件首次渲染的時候會調用 render，這個過程不可避免。算法

○ setState() 方法被調用

setState 是 React 中最經常使用的命令，一般狀況下，執行 setState 會觸發 render。可是這裏有個點值得關注，執行 setState 的時候必定會從新渲染嗎？答案是不必定。當 setState 傳入 null 的時候，並不會觸發 render ，能夠運行下面的 Demo 來佐證：編程

class App extends React.Component {
  state = {
    a: 1
  };

  render() {
    console.log("render");
    return (
      <React.Fragement>
        <p>{this.state.a}</p>
        <button
          onClick={() => {
            this.setState({ a: 1 }); // 這裏並無改變 a 的值
          }}
        >
          Click me
        </button>
        <button onClick={() => this.setState(null)}>setState null</button>
        <Child />
      </React.Fragement>
    );
  }
}

○ 父組件從新渲染

只要父組件從新渲染了，即便傳入子組件的 props 未發生變化，那麼子組件也會從新渲染，進而觸發 render。數組

咱們對上面的 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 (
      <React.Fragement>
        <p>{this.state.a}</p>
        <button
          onClick={() => {
            this.setState({ a: 1 });
          }}
        >
          Click me
        </button>
        <button onClick={() => this.setState(null)}>setState null</button>
        <Child />
      </React.Fragement>
    );
  }
}

優化 Render 咱們能作什麼？

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

上面說了沒必要要的 render 會帶來性能問題，所以咱們的主要優化思路就是減小沒必要要的 render。框架

○ shouldComponentUpdate 和 PureComponent

在 React 類組件中，能夠利用 shouldComponentUpdate 或者 PureComponent 來減小因父組件更新而觸發子組件的 render，從而達到目的。shouldComponentUpdate 來決定是否組件是否從新渲染，若是不但願組件從新渲染，返回 false 便可。前端性能

在 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 這個生命週期，能夠利用高階組件，封裝一個相似 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 十分相似，但不一樣的是， 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 恰好與其相反。

○ 合理拆分組件

微服務的核心思想是：以更輕、更小的粒度來縱向拆分應用，各個小應用可以獨立選擇技術、發展、部署。咱們在開發組件的過程當中也能用到相似的思想。試想當一個整個頁面只有一個組件時，不管哪處改動都會觸發整個頁面的從新渲染。在對組件進行拆分以後，render 的粒度更加精細，性能也能獲得必定的提高。

總結

本文主要介紹瞭如何減小沒必要要的 render 來提高 React 的性能。在實際開發過程當中，前端性能問題可能並不常見，隨着業務的複雜度增長，遇到性能問題的機率也會隨之增長。

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

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

招賢納士

政採雲前端團隊（ZooTeam），一個年輕富有激情和創造力的前端團隊，隸屬於政採雲產品研發部，Base 在風景如畫的杭州。團隊現有 50 餘個前端小夥伴，平均年齡 27 歲，近 3 成是全棧工程師，妥妥的青年風暴團。成員構成既有來自於阿里、網易的「老」兵，也有浙大、中科大、杭電等校的應屆新人。團隊在平常的業務對接以外，還在物料體系、工程平臺、搭建平臺、性能體驗、雲端應用、數據分析及可視化等方向進行技術探索和實戰，推進並落地了一系列的內部技術產品，持續探索前端技術體系的新邊界。

若是你想改變一直被事折騰，但願開始能折騰事；若是你想改變一直被告誡須要多些想法，卻無從破局；若是你想改變你有能力去作成那個結果，卻不須要你；若是你想改變你想作成的事須要一個團隊去支撐，但沒你帶人的位置；若是你想改變既定的節奏，將會是「5 年工做時間 3 年工做經驗」；若是你想改變原本悟性不錯，但老是有那一層窗戶紙的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但願參與到隨着業務騰飛的過程，親手推進一個有着深刻的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程，我以爲咱們該聊聊。任什麼時候間，等着你寫點什麼，發給 ZooTeam@cai-inc.com