React.Component
https://github.com/facebook/react/blob/master/packages/react/src/ReactBaseClasses.js
// 初始时自带 四个属性
function Component(props, context, updater) {
this.props = props;
this.context = context;
// If a component has string refs, we will assign a different object later.
this.refs = emptyObject;
// We initialize the default updater but the real one gets injected by the
// renderer.
this.updater = updater || ReactNoopUpdateQueue;
};
// 添加了判断传入的是否为 类 组件的标志。
Component.prototype.isReactComponent = {};
// 定义更新状态的方法。
// setState 接受两个参数 partialState:可以是对象、函数,callback:回调。
// this.updater.enqueueSetState 会更新state对象(reactDom)。
// 为什么要挂载到 this.updater 上?由于不同的平台渲染的方式不同(eg: ReactDOM、ReactNative), 根据传入的 updater对象 来实现对渲染的一个定制方式。
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.',
);
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
// 与setState类似,其实就是强制Component更新一遍,哪怕状态没有更新。
Component.prototype.forceUpdate = function(callback) {
this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};
// 这个不常用,其实和 Component 是一样的,只不过它多了一 isPureReactComponent
// = true 作用是在 React-dom中判断是否是个pure component,决定是否更新
function PureComponent(props, context, updater) {
this.props = props;
this.context = context;
// If a component has string refs, we will assign a different object later.
this.refs = emptyObject;
this.updater = updater || ReactNoopUpdateQueue;
}
const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
pureComponentPrototype.constructor = PureComponent;
Object.assign(pureComponentPrototype, Component.prototype);
pureComponentPrototype.isPureReactComponent = true;
// 问题?
// 关于 invariant => 判断下是不是一个对象or方法,然后提示。
// 不太懂 源码 为啥 直接 给错,也不看看传的参数。
export default function invariant(condition, format, a, b, c, d, e, f) {
throw new Error(
'Internal React error: invariant() is meant to be replaced at compile ' +
'time. There is no runtime version.',
);
}
// 应该这样
export default function invariant(condition, format, a, b, c, d, e, f) {
if(condition) return ;
throw new Error(
'Internal React error: invariant() is meant to be replaced at compile ' +
'time. There is no runtime version.',
);
}