React性能優化方案之PureRenderMixin

React性能檢測

安裝react性能檢測工具 npm i react-addons-perf --save，而後在初始化項目的./app/index.js中寫入如下代碼：

//性能檢測
import Perf from 'react-addons-perf'
if(_DEV_){
    window.Perf=Perf
}
複製代碼

在運行以前，先讓react項目啓動起來，而後打開開發者調試面板，在console中輸入Perf.start()開始檢測，在頁面上進行若干的操做之後，執行Perf.end()，終止檢測操做，而後執行Perf.printWasted()，在console中會打印出操做過程的一個列表展現本次性能結果。在實際項目開發中常常會使用它查看項目的性能狀況。

若是性能影響不是很大，例如每次操做就消耗幾秒到幾十毫秒，那就沒必要糾結。可是若是浪費過多時間影響到其用戶體驗，那咱們就必須搞定它。

PureRenderMixin 優化

react最經常使用的工具就是PureRenderMixin，使用 npm i react-addons-pure-render-mixin --save,安裝並使用：

import React,{Component} from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'

class Demo extends Component{
    constructor(props){
        super(props)
        this.shouldComponentUpdate=PureRenderMixin.shouldComponentUpdate.bind(this)
    }
    //省略其餘代碼....
}
複製代碼

react的生命週期hook中有個shouldComponentUpdate，組件每一次改動，都要問一下這個函數是否要執行更新，當這個函數返回true，則執行更新。返回false，則不執行更新。默認的狀況下，這個函數一直會返回true，即一些無效的更新也會執行。

爲何會有無效的改動？咱們都知道，在react組件中，state和props的改變都會觸發組件的更新和從新渲染。可是在react中有些時候state和props沒有改變也會觸發更新。這樣就會致使無效的渲染。

這裏使用this.shouldComponentUpdate=PureRenderMixin.shouldComponentUpdate.bind(this),其實是對組件原來的shouldComponentUpdate的方法進行重寫，每次更新以前都要查看props和state的是否發生改變，若是改變；就返回false，沒有就返回true。

因此咱們在react開發中都儘可能在組件中加入PureRenderMixin方法去優化性能。