React组件和对象的创建 源码分析

总结：
createClass返回值就是一个Constructor

1.ES5创建组件时，调用React.createClass()即可. ES6中使用class myComponent extends React.Component, 其实内部还是调用createClass创建组件。

createClass主要做的事情有：（返回值是个Constructor函数）
1.定义构造方法Constructor，构造方法中进行props，refs等的初始化，并调用getInitialState来初始化state
2.调用getDefaultProps，并放在defaultProps类变量上。这个变量不属于某个单独的对象。可理解为static 变量
3.将React中暴露给应用，但应用中没有设置的方法，设置为null。

2.JSX中创建React元素最终会被babel转译为createElement(type, config, children), babel根据JSX中标签的首字母来判断是原生DOM组件，还是自定义React组件。

自解：babel转了后是creatElement（type,config,children）的函数执行，这个函数执行内部呢再提取出一些对象属性，作为参数再在内部调用ReactElement（createElement的返回值ReactElement的函数执行）生成一个js对象，最终格式是：（ReactElement就是在createElement的基础上取取createElement里的参数值封装出一层对象，其实也就是相当于换个格式而已啦，调用ReactElement之前，参数们都是var声明出的形式，目测没有放进一个统一对象里）
{
// This tag allow us to uniquely identify this as a React Element
$$typeof: REACT_ELEMENT_TYPE,

// ReactElement对象上的四个变量，特别关键
type: type,
key: key,
ref: ref,
props: props,

// Record the component responsible for creating this element.
_owner: owner
};

3.组件渲染：
上面babel后不是得到了element（ReactElement）的js对象了吗？这时候，渲染时候会调用instantiateReactComponent()来处理这个element(当做参数传进去)
此时，在instantiateReactComponent（内部）会根据element.type的不同分别用四种方法调用它，返回值为instance，也作为instantiateReactComponent的返回值。
故我们可以看到有四种创建组件元素的方式，同时对应四种ReactElement（自解：这四个目测都属于渲染方法？？？？）

第一种.
ReactEmptyComponent.create(), 创建空对象ReactDOMEmptyComponent
第二种.
ReactNativeComponent.createInternalComponent(), 创建DOM原生对象 ReactDOMComponent
第三种.
new ReactCompositeComponentWrapper(), 创建React自定义对象ReactCompositeComponent
第四种.
ReactNativeComponent.createInstanceForText(), 创建文本对象 ReactDOMTextComponent