React Render Array 效能大亂鬥

LucasHC發表於2017-10-26

現在關於 React 最新 v16 版本新特性的宣傳、講解已經“鋪天蓋地”了。你最喜歡哪一個 new feature？
截至目前，元件構建方式已經琳琅滿目。那麼，你考慮過他們的效能對比嗎？這篇文章，聚焦其中一個小細節，進行對比，望讀者參考的同時，期待大神斧正。

從 React.PureComponent 說起

先上結論：在我們的測試當中，使用 React.PureComponent 能夠提升 30% JavaScript 執行效率。測試場景是反覆運算元組，這個“反覆操作”有所講究，我們計劃持續不斷地改變陣列的某一項（而不是整個陣列的大範圍變動）。

線上參考地址：請點選這裡

那麼這樣的場景，作為開發者有必要研究嗎？如果你的應用並不涉及到高頻率的更新陣列某幾項，那麼大可不必在意這些效能的微妙差別。但是如果存在一些“實時更新”的場景，比如：

使用者輸入改變陣列（點贊者顯示）；
輪詢（股票實時）；
推更新（比賽比分實時播報）；

那麼就需要進行考慮。我們定義：changedItems.length / array.length 比例越小，本文所涉及的效能優化越應該實施，即越有必要使用 React.PureComponent。

程式碼和效能測試

在使用 React 開發時，相信很多開發者在搭配函式式的狀態管理框架 Redux 使用。Redux reducers 作為純函式的同時，也要保證 state 的不可變性，在我們的場景中，也就是說在相關 action 被觸發時，需要返回一個新的陣列。

const users = (state, action) => {
  if (action.type === 'CHANGE_USER_1') {
    return [action.payload, ...state.slice(1)]
  }
  return state
}複製程式碼

如上程式碼，當 CHANGE_USER_1 時，我們對陣列的第一項進行更新，使用 slice 方法，不改變原陣列的同時返回新的陣列。

我們設想所有的 users 陣列被 Users 函式式元件渲染：

import User from './User'
const Users = ({users}) =>
  <div>
    {
      users.map(user => <User {...user} />
    }
  </div>複製程式碼

問題的關鍵在於：users 陣列作為 props 出現，當陣列中的第 K 項改變時，所有的元件都會進行 reconciliation 的過程，即使非 K 項並沒有發生變化。

這時候，我們可以引入 React.PureComponent，它通過淺對比規避了不必要的更新過程。即使淺對比自身也有計算成本，但是一般情況下這都不值一提。

以上內容其實已經“老生常談”了，下面直接進入程式碼和效能測試環節。

我們渲染了一個有 200 項的陣列：

const arraySize = 200;
const getUsers = () =>
  Array(arraySize)
    .fill(1)
    .map((_, index) => ({
      name: 'John Doe',
      hobby: 'Painting',
      age: index === 0 ? Math.random() * 100 : 50
    }));複製程式碼

注意在 getUsers 方法中，關於 age 屬性我們做了判斷，保證每次呼叫時，getUsers 返回的陣列只有第一項的 age 屬性不同。
這個陣列將會觸發 400 次 re-renders 過程，並且每一次只改變陣列第一項的一個屬性(age):

  const repeats = 400;
  componentDidUpdate() {
    ++this.renderCount;
    this.dt += performance.now() - this.startTime;
    if (this.renderCount % repeats === 0) {
      if (this.componentUnderTestIndex > -1) {
        this.dts[componentsToTest[this.componentUnderTestIndex]] = this.dt;
        console.log(
          'dt',
          componentsToTest[this.componentUnderTestIndex],
          this.dt
        );
      }
      ++this.componentUnderTestIndex;
      this.dt = 0;
      this.componentUnderTest = componentsToTest[this.componentUnderTestIndex];
    }
    if (this.componentUnderTest) {
      setTimeout(() => {
        this.startTime = performance.now();
        this.setState({ users: getUsers() });
      }, 0);
    } else {
      alert(`
        Render Performance ArraySize: ${arraySize} Repeats: ${repeats}
        Functional: ${Math.round(this.dts.Functional)} ms
        PureComponent: ${Math.round(this.dts.PureComponent)} ms
        Component: ${Math.round(this.dts.Component)} ms
      `);
    }
  }複製程式碼

為此，我們採用三種方式設計元件。

函式式方式

export const Functional = ({ name, age, hobby }) => (
  <div>
    <span>{name}</span>
    <span>{age}</span>
    <span>{hobby}</span>
  </div>
);複製程式碼

PureComponent 方式

export class PureComponent extends React.PureComponent {
  render() {
    const { name, age, hobby } = this.props;
    return (
      <div>
        <span>{name}</span>
        <span>{age}</span>
        <span>{hobby}</span>
      </div>
    );
  }
}複製程式碼

經典 class 方式

export class Component extends React.Component {
  render() {
    const { name, age, hobby } = this.props;
    return (
      <div>
        <span>{name}</span>
        <span>{age}</span>
        <span>{hobby}</span>
      </div>
    );
  }
}複製程式碼

同時，在不同的瀏覽器環境下，我得出：