创建组件内幕[一源看世界][之React]

创建一个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;
  },

1. 声明一个构造函数Constructor
2. Constructor继承自ReactClassComponent
3. 将spec的配置信息赋值给Constructor和Constructor的prototype
4. 如果有定义getDefaultProps方法，则将执行结果赋值给Constructor.defaultProps
5. 返回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] = ... 
      ....
    }
  }
}

1. 先处理mixins属性，保证这些mixins对象的方法的优先执行顺序。
   通过调用RESERVED_SPEC_KEYS.mixins方法会递归调用mixSpecIntoComponent方法，把mixins上的方法以merge或chain的形式赋值到Constructor的相关属性上
2. 如果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--