創建一個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--