React PureRenderMixin

PureRenderMixin

如果您的 React 元件的 render 函式非常單純(相對來說,就只是單純想把 props 和 state 輸出),您就可以使用 PureRenderMixin 來提升效能:

1
2
3
4
5
6
7
8
var PureRenderMixin = require('react').addons.PureRenderMixin;
React.createClass({
mixins: [PureRenderMixin],

render: function() {
return <div className={this.props.className}>foo</div>;
}
});

內部的 mixin 幫您實作了 shouldComponentUpdate ,他會幫您比對 propsstate ,只要一樣就回傳 false
協助您快速提升一些效能:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
* @jsx React.DOM
*/
var PureRenderMixin = React.addons.PureRenderMixin;
var iPhone = React.createClass({
mixins: [PureRenderMixin],
getDefaultProps: function () {
return {className: 'red'}
},
handleClick: function () {
this.setProps({className: 'blue'});
console.log('excute handle click');
},
render: function() {
console.log('I am rendering now...');
return <div className={this.props.className} onClick={this.handleClick}>foo</div>;
}
});

React.renderComponent(
<iPhone />,
document.getElementById('example')
)

注意:
關於比對方面,React 只為您執行淺層的比對。意思是如果您的資料結構非常複雜可能 shouldComponentUpdate() 可能永遠判斷兩個物件為 true,因為他只做淺層比對,有可能是只比較參考。
所以建議您使用單純屬性和狀態或使用強制更新 forceUpdate() 當你知道這個資料結構太複雜的時候。
此外,shouldComponentUpdate 會略過子元件的更新,所以請確保所有的東西是真的很單純!

作者

andyyou(YOU,ZONGYAN)

發表於

2014-09-18

更新於

2021-12-12

許可協議