摘要：現(xiàn)在關(guān)于最新版本新特性的宣傳講解已經(jīng)鋪天蓋地了。測(cè)試場(chǎng)景是反復(fù)操作數(shù)組，這個(gè)反復(fù)操作有所講究，我們計(jì)劃持續(xù)不斷地改變數(shù)組的某一項(xiàng)而不是整個(gè)數(shù)組的大范圍變動(dòng)。代碼和性能測(cè)試在使用開(kāi)發(fā)時(shí)，相信很多開(kāi)發(fā)者在搭配函數(shù)式的狀態(tài)管理框架使用。

現(xiàn)在關(guān)于 React 最新 v16 版本新特性的宣傳、講解已經(jīng)“鋪天蓋地”了。你最喜歡哪一個(gè) new feature？
截至目前，組件構(gòu)建方式已經(jīng)琳瑯滿目。那么，你考慮過(guò)他們的性能對(duì)比嗎？這篇文章，聚焦其中一個(gè)小細(xì)節(jié)，進(jìn)行對(duì)比，望讀者參考的同時(shí)，期待大神斧正。

先上結(jié)論：在我們的測(cè)試當(dāng)中，使用 React.PureComponent 能夠提升 30% JavaScript 執(zhí)行效率。測(cè)試場(chǎng)景是反復(fù)操作數(shù)組，這個(gè)“反復(fù)操作”有所講究，我們計(jì)劃持續(xù)不斷地改變數(shù)組的某一項(xiàng)（而不是整個(gè)數(shù)組的大范圍變動(dòng)）。

線上參考地址： 請(qǐng)點(diǎn)擊這里

那么這樣的場(chǎng)景，作為開(kāi)發(fā)者有必要研究嗎？如果你的應(yīng)用并不涉及到高頻率的更新數(shù)組某幾項(xiàng)，那么大可不必在意這些性能的微妙差別。但是如果存在一些“實(shí)時(shí)更新”的場(chǎng)景，比如：

用戶輸入改變數(shù)組（點(diǎn)贊者顯示）；

輪詢（股票實(shí)時(shí)）；

推更新（比賽比分實(shí)時(shí)播報(bào)）；

那么就需要進(jìn)行考慮。我們定義：changedItems.length / array.length 比例越小，本文所涉及的性能優(yōu)化越應(yīng)該實(shí)施，即越有必要使用 React.PureComponent。

在使用 React 開(kāi)發(fā)時(shí)，相信很多開(kāi)發(fā)者在搭配函數(shù)式的狀態(tài)管理框架 Redux 使用。Redux reducers 作為純函數(shù)的同時(shí)，也要保證 state 的不可變性，在我們的場(chǎng)景中，也就是說(shuō)在相關(guān) action 被觸發(fā)時(shí)，需要返回一個(gè)新的數(shù)組。

const users = (state, action) => {
  if (action.type === "CHANGE_USER_1") {
    return [action.payload, ...state.slice(1)]
  }
  return state
}

如上代碼，當(dāng) CHANGE_USER_1 時(shí)，我們對(duì)數(shù)組的第一項(xiàng)進(jìn)行更新，使用 slice 方法，不改變?cè)瓟?shù)組的同時(shí)返回新的數(shù)組。

我們?cè)O(shè)想所有的 users 數(shù)組被 Users 函數(shù)式組件渲染：

import User from "./User"
const Users = ({users}) =>
  

    {
      users.map(user => 
    }
  

問(wèn)題的關(guān)鍵在于：users 數(shù)組作為 props 出現(xiàn)，當(dāng)數(shù)組中的第 K 項(xiàng)改變時(shí)，所有的 組件都會(huì)進(jìn)行 reconciliation 的過(guò)程，即使非 K 項(xiàng)并沒(méi)有發(fā)生變化。

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

以上內(nèi)容其實(shí)已經(jīng)“老生常談”了，下面直接進(jìn)入代碼和性能測(cè)試環(huán)節(jié)。

我們渲染了一個(gè)有 200 項(xiàng)的數(shù)組：

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

注意在 getUsers 方法中，關(guān)于 age 屬性我們做了判斷，保證每次調(diào)用時(shí)，getUsers 返回的數(shù)組只有第一項(xiàng)的 age 屬性不同。
這個(gè)數(shù)組將會(huì)觸發(fā) 400 次 re-renders 過(guò)程，并且每一次只改變數(shù)組第一項(xiàng)的一個(gè)屬性(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
      `);
    }
  }

為此，我們采用三種方式設(shè)計(jì) 組件。

export const Functional = ({ name, age, hobby }) => (
  

    {name}
    {age}
    {hobby}
  
);

export class PureComponent extends React.PureComponent {
  render() {
    const { name, age, hobby } = this.props;
    return (
      

        {name}
        {age}
        {hobby}
      
    );
  }
}

export class Component extends React.Component {
  render() {
    const { name, age, hobby } = this.props;
    return (
      

        {name}
        {age}
        {hobby}
      
    );
  }
}

同時(shí)，在不同的瀏覽器環(huán)境下，我得出：

Firefox 下，PureComponent 收益 30%；

Safari 下，PureComponent 收益 6%；

Chrome 下，PureComponent 收益 15%；

測(cè)試硬件環(huán)境：

最終結(jié)果：

最后，送給大家魯迅先生的一句話：

“Early optimization is the root of all evil”?- 魯迅

Happy Coding!
PS: 作者?Github倉(cāng)庫(kù)?和?知乎問(wèn)答鏈接?歡迎各種形式交流。

我的其他幾篇關(guān)于React技術(shù)棧的文章：
React Redux 中間件思想遇見(jiàn) Web Worker 的靈感（附demo）
了解 Twitter 前端架構(gòu) 學(xué)習(xí)復(fù)雜場(chǎng)景數(shù)據(jù)設(shè)計(jì)
React 探秘 - React Component 和 Element（文末附彩蛋demo和源碼）
從setState promise化的探討 體會(huì)React團(tuán)隊(duì)設(shè)計(jì)思想
通過(guò)實(shí)例，學(xué)習(xí)編寫(xiě) React 組件的“最佳實(shí)踐”
React 組件設(shè)計(jì)和分解思考
從 React 綁定 this，看 JS 語(yǔ)言發(fā)展和框架設(shè)計(jì)
React 服務(wù)端渲染如此輕松 從零開(kāi)始構(gòu)建前后端應(yīng)用
做出Uber移動(dòng)網(wǎng)頁(yè)版還不夠 極致性能打造才見(jiàn)真章**
React+Redux打造“NEWS EARLY”單頁(yè)應(yīng)用 一個(gè)項(xiàng)目理解最前沿技術(shù)棧真諦**