React.Component和 React.PureComponent
在开发的时候，偶然看到别人的代码使用了 React.PureComponent进行继承，我也跟着复制粘贴，但是并不知道他到底有什么作用，于是下来去了解了一下他两的区别，总结一下。
PureComponent使用浅比较的方式对比props和state，实现了shouldComponentUpdate()函数，在某些情况下，使用PureComponent可以减少render函数的执行，提升性能。
- 组件继承component：
export default class Page extends React.Component{
constructor(props) {
super(props);
this.state = {
isShow:false,
};
console.log('1');
}
componentDidUpdate() {
console.log("componentDidUpdate")
}
@Bind()
onClick() {
this.setState({
isShow: true,
});
};
render() {
console.log('2');
return (
<div>
<button onClick={this.onClick}>点击</button>
<div>
{this.state.isShow.toString()}
</div>
</div>
);
}
}
在首次渲染页面的时候，依次打印：'1', '2',当第一次点击按钮之后，打印'2', 'componentDidUpdate',在每次点击按钮之后，都会打印'2', 'componentDidUpdate'，说明每点击一次，虽然state中的值没有改变，都会调用render()和componentDidUpdate()方法，触发页面的重新渲染，通常情况下需要我们重新手动调用shouldComponentUpdate()来判断state的值是否有改变，来决定页面是否重新渲染。
因此，继承自Component中的组件shouldComponentUpdate()默认情况下总是返回true，总是会触发页面的重新渲染。
- 组件继承pureComponent：
export default class Page extends React.PureComponent{
constructor(props) {
super(props);
this.state = {
isShow:false,
};
console.log('1');
}
componentDidUpdate() {
console.log("componentDidUpdate")
}
@Bind()
onClick() {
this.setState({
isShow: true,
});
};
render() {
console.log('2');
return (
<div>
<button onClick={this.onClick}>点击</button>
<div>
{this.state.isShow.toString()}
</div>
</div>
);
}
}
在首次渲染页面的时候，依次打印：'1', '2',当第一次点击按钮之后，打印'2', 'componentDidUpdate',在每次点击按钮之后，没有输出。在purComponent源码中：
// 这个变量用来控制组件是否需要更新
var shouldUpdate = true;
// inst 是组件实例
if (inst.shouldComponentUpdate) {
shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext);
} else {
if (this._compositeType === CompositeType.PureClass) {
shouldUpdate = !shallowEqual(prevProps, nextProps) ||
!shallowEqual(inst.state, nextState);
}
}
判断新旧属性和状态是否相等，是否需要重新渲染子组件，减少render()方法的触发，节省了在虚拟DOM生成与对比的过程，性能得到提升。
PureComponent默认实现的shouldComponentUpdate()方法使用的是浅比较：即值的比较或引用的比较, 不会进行深层次的对比，所以当props或state的值是引用类型时，即使对象的值改变了，但是对象的引用没变。
export default class Page extends React.PureComponent{
constructor(props) {
super(props);
this.state = {
isShow: [1,2],
};
console.log('1');
}
componentDidUpdate() {
console.log("componentDidUpdate")
}
@Bind()
onClick() {
const { isShow } = this.state;
isShow.push(1);
this.setState({
isShow,
});
console.log(this.state.isShow);
};
render() {
console.log(this.state.isShow);
return (
<div>
<button onClick={this.onClick}>点击</button>
{
arr.map(item => <span key={item}>{item}</span>)
}
</div>
);
}
}
在上面这段代码中，初次渲染打印'1',[1,2],点击按钮之后，打印出[1,2]，render()函数没有执行，页面上展示的只有1 2。
总结
- PureComponent已经用浅层对比props、state的方式替我们实现了shouldComponentUpdate()， 不仅能影响自身，还会影响其子组件；
- PureComponent 某些情况下（props或state的值不经常变动， 因为浅比较也会耗时）可以提升性能；
遗留问题
PureComponent只是进行浅比较，无法判断复杂数据类型（引用类型）的变化，还需要下来进行深入的研究。
