React效能優化方案之PureRenderMixin

vi_young發表於2018-06-01
React優化

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方法去優化效能。

相關文章