react 實用的性能優化方式

react 組件渲染分爲初始化渲染和更新渲染,當咱們更新某個組件的時候,只是想關鍵路徑上組件的render,但react的默認作法是調用因此組件的reder,再生成虛擬dom進行對比,如不變則不進行更新。這樣的render和虛擬DOM的對比明顯是在浪費。
React的優化是基於shouldComponentUpdate的,該生命週期默認返回true,因此一旦prop或state有任何變化,都會引發從新render。shouldComponentUpdate 有兩個參數,一個是nextProps,一個nextState 。根據渲染流程,首先會判斷shouldComponentUpdate(SCU)是否須要更新。若是須要更新,則調用組件的render生成新的虛擬DOM,而後再與舊的虛擬DOM對比(vDOMEq),若是對比一致就不更新,若是對比不一樣,則根據最小粒度改變去更新DOM;若是SCU不須要更新,則直接保持不變,同時其子元素也保持不變。html

下面有幾條優化的建議:

  1. this.handleChange.bind(this,id) (請將方法的bind一概置於constructor);
  2. 複雜的頁面不要在一個組件裏面寫完;
  3. map裏面添加key,而且key不要使用index(可變的);
  4. 請儘可能使用const element;
  5. 儘可能少用setTimeOut或不可控的refs、DOM操做;
    6.props和state的數據儘量簡單明瞭,扁平化;

官方提供的性能檢測工具:React.addons.Perf和react-perf-tool ;react

性能優化方法:1)es6寫法;

var shallowCompare = require('react-addons-shallow-compare');
export class SampleComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return shallowCompare(this, nextProps, nextState);
}
}es6

2)es7 修飾符:
import pureRender from "pure-render-decorator"
...segmentfault

@pureRender性能優化

3)更簡便的方式:
function shallowCompare(instance, nextProps, nextState) {
return !shallowEqual(instance.props, nextProps) || !shallowEqual(instance.state, nextState);
}dom

4)使用react-addons-pure-render-mixin 插件,代碼以下:

5)react 15.3之後用React.PureComponent - 一個可繼承的新的基礎類, 用來替換react-addons-pure-render-mixin;代碼以下:

以上的方法都是淺比較,若是結構比較複雜,則須要使用immutable.js 。工具

本文參考:https://segmentfault.com/a/1190000007811296 和 https://wulv.site/2017-05-31/react-purecomponent.html ,感謝分享;性能

相關文章
相關標籤/搜索