本文使用的是react 15.6.1的代码
在认识PureComponent之前，我们来看一下这样俩段代码
class Parent extends React.Component {
constructor() {
super();
this.state = {
name: 'jack'
};
}
render(){
return (
<div>
<span>{this.state.name}</span>
<button onClick={this.clickBtn.bind(this)}>click me</button>
<Child/>
</div>
)
}
}
class Child extends React.Component {
componentDidUpdate() {
console.log('i am update');
}
render() {
return <div>
</div>
}
}
组件Parent有一个组件Child,但是Child还没有从外部接收任何props，这时候父标签点击按钮，触发this.state，父组件被设置成dirtyComponent，开始更新，这时候发现，子组件也打印了 i am update,即子组件也被更新了，但是从源码上来看，这个时候child其实并不需要更新。
那么我们将子组件继承自 PureComponent试试看呢
class Child extends React.PureComponent {
componentDidUpdate() {
console.log('i am update');
}
render(){
return <div></div>
}
}
这个时候发现我们点击父组件的按钮，子组件不在更新了，带着这个问题，我们来看看PureComponent的源代码，位于ReactBaseClasses.js
function ReactPureComponent(props, context, updater) {
// Duplicated from ReactComponent.
this.props = props;
this.context = context;
this.refs = emptyObject;
// We initialize the default updater but the real one gets injected by the
// renderer.
this.updater = updater || ReactNoopUpdateQueue;
}
ReactPureComponent.prototype = new ComponentDummy();
ReactPureComponent.prototype.constructor = ReactPureComponent;
Object.assign(ReactPureComponent.prototype, ReactComponent.prototype);
// 重点代码
ReactPureComponent.prototype.isPureReactComponent = true;
构造函数和普通的ReactComponent代码一模一样，不同点是，PureComponent的示例多了一个属性 isPureReactComponent并为true,这个属性有什么作用呢？
回到自定义组件（ReactCompositeComponent.js）的 mountComponent方法
mountComponent:function(){
......
// Support functional components
if (!doConstruct && (inst == null || inst.render == null)) {
renderedElement = inst;
warnIfInvalidElement(Component, renderedElement);
inst = new StatelessComponent(Component);
this._compositeType = CompositeTypes.StatelessFunctional;
} else {
if (isPureComponent(Component)) {
this._compositeType = CompositeTypes.PureClass;
} else {
this._compositeType = CompositeTypes.ImpureClass;
}
}
}
......
在这里，一个正常的react组件会进入else方法，在这里执行了isPureComponent函数，更改了私有属性_compositeType值
对应的 isPureComponent如下
function isPureComponent(Component) {
return !!(Component.prototype && Component.prototype.isPureReactComponent);
}
即如果 isPureReactComponent为true,那么就是一个pureComponent,上面知道，继承自PureComponent的组件原型上isPureReactComponent为true,知道了_compositeType=CompositeTypes.PureClass有什么用呢？在来看看调用child组件componentDidUpdate的updateComponent方法 （具体流程见react源码阅读笔记（5）组件的生命周期）
updateComponent: function(
transaction,
prevParentElement,
nextParentElement,
prevUnmaskedContext,
nextUnmaskedContext,
) {
......
if (!this._pendingForceUpdate) {
//生命周期shouldComponentUpdate
if (inst.shouldComponentUpdate) {
// 获取是否需要更新
shouldUpdate = inst.shouldComponentUpdate(
nextProps,
nextState,
nextContext,
);
} else {
if (this._compositeType === CompositeTypes.PureClass) {
shouldUpdate =
!shallowEqual(prevProps, nextProps) ||
!shallowEqual(inst.state, nextState);
}
}
}
},
......
在这里,我们注意到如果组件没有声明shouldComponentUpdate方法的并且为PureComponent的时候会调用shallowEqual方法，把当前的props以及state传入其中，来看一下对应的shallowEqual方法
function is(x, y) {
// SameValue algorithm
if (x === y) {
// Steps 1-5, 7-10
// Steps 6.b-6.e: +0 != -0
// Added the nonzero y check to make Flow happy, but it is redundant 真是调皮
return x !== 0 || y !== 0 || 1 / x === 1 / y;
} else {
// 如果x和y都是NaN的话，也会返回true,否则就是false
return x !== x && y !== y;
}
}
function shallowEqual(objA, objB) {
// 正常情况只有一般类型(number,string,undefined)且相等，该判断才为true
if (is(objA, objB)) {
return true;
}
//上面已经确定了走到这里的一般类型只能不等，所以返回false
if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
return false;
}
// 获取引用类型属性 详细见
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
var keysA = Object.keys(objA);
var keysB = Object.keys(objB);
if (keysA.length !== keysB.length) {
return false;
}
// Test for A's keys different from B.
for (var i = 0; i < keysA.length; i++) {
if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
return false;
}
}
return true;
}
代码很简单，简单来说，就是判断传入参数值是否相等，如果是引用类型，先判断key的长度，随后对其第一层key和value进行比较（即浅比较）如果完全相等，则这objectA,objectB相等。
带入外层代码看
shouldUpdate = !shallowEqual(prevProps, nextProps) ||!shallowEqual(inst.state, nextState);
如果prevProps, nextProps，inst.state, nextState，浅比较相同的话，那么，shouldUpdate就是false,既然这样，自然会跳过渲染阶段，只会重新更新props,state,context等信息
总结
看完代码后，发现PureComponent其实其实就是一次Component的再一次封装，和自己实现shouldComponentUpdate是一样的效果，在大多数情况下，都可以直接使用Component进行业务的开发，如果遇到性能瓶颈，可以尝试用PureComponent进行优化，如果PureComponent依然出现了性能问题，那么就需要自己去分析代码，自己尝试去重写shouldComponentUpdate方法
网友评论