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
官方提供的性能檢測工具:React.addons.Perf和react-perf-tool ;react
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 ,感謝分享;性能