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

2019 年 12 月 20 日
筆記

本文首發於政采雲前端團隊部落格：性能！！讓你的 React 組件跑得再快一點 https://www.zoo.team/article/react-render

性能和渲染（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 演算法，但是這個過程仍然會損耗性能。

渲染（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。

Parent and Child Component

我們對上面的 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
對組件進行合理的拆分

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