class CounterButton extends React.Component {
,构造函数(道具){
超级才能(道具);
this.state 才能=,{数:1};
,}
,shouldComponentUpdate (nextProps, nextState), {
if 才能;(this.props.color !==, nextProps.color), {
,,return 真实;
,,}
if 才能;(this.state.count !==, nextState.count), {
,,return 真实;
,,}
return 才能;假;
,}
,使(){
return 才能;
,,& lt;按钮
,,,颜色={this.props.color}
,,,onClick={(),=祝辞,this.setState (state =祝辞,({数:,state.count +, 1}))}祝辞
,,,数:,{this.state.count}
,,& lt;/button>
,,);
,}
} 在以上代码中,<代码> shouldComponentUpdate> props.color 和<代码>状态。数> 反应。PureComponent> class CounterButton extends React.PureComponent {
,构造函数(道具){
超级才能(道具);
this.state 才能=,{数:1};
,}
,使(){
return 才能;
,,& lt;按钮
,,,颜色={this.props.color}
,,,onClick={(),=祝辞,this.setState (state =祝辞,({数:,state.count +, 1}))}祝辞
,,,数:,{this.state.count}
,,& lt;/button>
,,);
,}
} <>强PureComponent
<强>原理
当组件更新时,如果组件的道具和状态都没发生改变,呈现方法就不会触发,省去虚拟DOM的生成和比对过程,达到提升性能的目的。具体就是反应自动帮我们做了一层浅比较:
if (this._compositeType ===, CompositeTypes.PureClass), {
shouldUpdate 才能=,! shallowEqual (prevProps, nextProps), | |, ! shallowEqual (nextState inst.state也);
} 而shallowEqual又做了什么呢?会比较对象。键(状态|道具)的长度是否一致,每一个关键是否两者都有,并且是否是一个引用,也就是只比较了第一层的值,确实很浅,所以深层的嵌套数据是对比不出来的。
<强>问题
大部分情况下,你可以使用反应。PureComponent而不必写你自己的shouldComponentUpdate,它只做一个浅比较。但是由于浅比较会忽略属性或状态突变的情况,此时你不能使用它。
class ListOfWords extends React.PureComponent {
,使(){
return 才能;& lt; div> {this.props.words.join (& # 39; & # 39;)} & lt;/div>;
,}
}
class WordAdder extends React.Component {
,构造函数(道具){
超级才能(道具);
this.state 才能=,{
,,,话说:[& # 39;marklar& # 39;】
,,};
时间=this.handleClick 才能;this.handleClick.bind(这个);
,}
,handleClick (), {//才能,却;能够section is bad style 以及causes a bug
const 才能;words =, this.state.words;
words.push才能(& # 39;marklar& # 39;);
this.setState才能({词:,话说});
,}
,使(){
return 才能;
,,& lt; div>
,,,& lt; button onClick={this.handleClick},/比;
,,,& lt; ListOfWords 词={this.state.words},/比;
,,& lt;/div>
,,);
,}
}
