如果你的React組件的渲染函數(shù)是“純粹的”(換句話說,當傳給它同樣的props和state,它渲染出同樣的效果),在某些場景下,你可以利用這個插件來極大地提升性能。
例如:
var PureRenderMixin = require('react').addons.PureRenderMixin;
React.createClass({
mixins: [PureRenderMixin],
render: function() {
return <div className={this.props.className}>foo</div>;
}
});
在底層,該插件實現(xiàn)了shouldComponentUpdate,在這里面,它比較當前的props、state和接下來的props、state,當兩者相等的時候返回false
。
注意:
僅僅是淺比較對象。如果對象包含了復雜的數(shù)據(jù)結構,深層次的差異可能會產(chǎn)生誤判。僅用于擁有簡單props和state的組件,或者當你知道很深的數(shù)據(jù)結構已經(jīng)變化了的時候使用
forceUpdate()
?;蛘?,考慮使用immutable objects來幫助嵌套數(shù)據(jù)快速比較。此外,
shouldComponentUpdate
會跳過更新整個組件子樹。確保所有的子組件也是“純粹的”。