创建一个React Component可用以下代码创建：
var ExampleApplication = React.createClass({
......
});
React.createClass都做了些啥呢？？？啥呢？？?啥呢？？？
首先，我们要找出React这个全局对象的源码。来，跟着我唱:"React在哪里呀，React在哪里"，噔！噔！噔！就在src/isomorphic/React.js
var ReactClass = require('ReactClass');
...
var React = {
...
createClass: ReactClass.createClass,
...
};
所以找出一个真相就是createClass的方法其实是ReactClass (src/isomorphic/classic/class/ReactClass.js) 中，直接定位到该文件的该方法，来一探究竟吧。
把多余的代码去掉后，真相就很清楚了
createClass: function(spec) {
var Constructor = function(props, context, updater) { ... };
Constructor.prototype = new ReactClassComponent();
Constructor.prototype.constructor = Constructor;
Constructor.prototype.__reactAutoBindPairs = [];
mixSpecIntoComponent(Constructor, spec);
// Initialize the defaultProps property after all mixins have been merged.
if (Constructor.getDefaultProps) {
Constructor.defaultProps = Constructor.getDefaultProps();
}
....
return Constructor;
},
- 声明一个构造函数Constructor
- Constructor继承自ReactClassComponent
- 将spec的配置信息赋值给Constructor和Constructor的prototype
- 如果有定义getDefaultProps方法，则将执行结果赋值给Constructor.defaultProps
- 返回Constructor
所以createClass返回了一个构造函数Constructor，它在React中称为React元素(ReactElement)的类型(type)
React的官方文档对getDefaultProps的描述，其中一句如下：
Invoked once and cached when the class is created.
意思是当类被创建时，该方法只调用一次并把结果缓存起来。上面的源码Constructor.defaultProps = Constructor.getDefaultProps();已经说明了这一点，它是类静态方法，返回的结果缓存在静态属性defaultProps上，所以当我们用ES6形式创建组件时，就要把defaultProps属性声明在类上，如：
class Counter extends React.component { ... }
Counter.defaultProps = { initialCount: 0 };
mixSpecIntoComponent是如何处理spec的？
同样把多余的代码去掉后，真相就浮出水面：
function mixSpecIntoComponent(Constructor, spec) {
....
var proto = Constructor.prototype;
var autoBindPairs = proto.__reactAutoBindPairs;
// By handling mixins before any other properties, we ensure the same
// chaining order is applied to methods with DEFINE_MANY policy, whether
// mixins are listed before or after these methods in the spec.
if (spec.hasOwnProperty(MIXINS_KEY)) {
RESERVED_SPEC_KEYS.mixins(Constructor, spec.mixins);
}
for (var name in spec) {
....
var property = spec[name];
....
if (RESERVED_SPEC_KEYS.hasOwnProperty(name)) {
RESERVED_SPEC_KEYS[name](Constructor, property);
} else {
// Setup methods on prototype:
....
proto[name] = ...
....
}
}
}
- 先处理mixins属性，保证这些mixins对象的方法的优先执行顺序。
通过调用RESERVED_SPEC_KEYS.mixins方法会递归调用mixSpecIntoComponent方法，把mixins上的方法以merge或chain的形式赋值到Constructor的相关属性上 - 如果spec的属性名存在于RESERVED_SPEC_KEYS对象，则将该属性值作为Constructor的静态属性，如
displayName
如果spec的属性名不存在于RESERVED_SPEC_KEYS对象，则将该属性值作为Constructor的prototype的属性，如getInitialState
spec的属性值赋值给Constructor的属性或prototype的属性的方式，需要根据ReactClassInterface定义的规范，而规范的方式则在SpecPolicy定义。
比如mixins: SpecPolicy.DEFINE_MANY是指mixins属性值可以定义多个，多个是会串行执行(chain)
具体请仔细阅读ReactClassInterface和SpecPolicy的源码注释
最后，期待吐槽，期待指教！！！
--EOF--
