谈react优化其中最重要的一个组件就是PureComponent,主要的特点就是当数据即使发生深层次的变化,PureComponent也不会更新而且影响到子组件。
那PureComponent和Component的之间的联系在哪里,以下是对react框架代码的一些理解。
一、都是从React.js中暴露出来, 删除多此次不相关代码
import {
Component, PureComponent} from './ReactBaseClasses';
const React = {
Children: {
map,
forEach,
count,
toArray,
only,
},
createRef,
Component,
PureComponent,
};
export default React;
此处可以看到Component都是来自于ReactBaseClasses.js,这样就很有意思了。PureComponent其实就是继承自Component, 注意ComponentDummy个人理解为Component复制品
function Component(props, context, updater) {
this.props = props;
this.context = context;
this.refs = emptyObject;
this.updater = updater || ReactNoopUpdateQueue;
}
Component.prototype.isReactComponent = {
};
// 这里就是很熟悉的setSate
Component.prototype.setState = function(partialState, callback) {
invariant(
typeof partialState === 'object' ||
typeof partialState === 'function' ||
partialState == null,
'setState(...): takes an object of state variables to update or a ' +
'function which returns an object of state variables.',
);
// 为什么说 setState异步的,updater更新的是一个队列
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
// 强制更新
Component.prototype.forceUpdate = function(callback) {
this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};
// 声明一个复制品Component,利用其原型继承Componen