// 函数组件
 function functionComponent(props) {
 return (<h1 {...props}>test</h1>) // 最终生成JSX,JSX由babel解析为React.createElemnet
 }
 ReactDOM.render(functionComponent({field: 1}), el)
 
 // 类组件
 class A extends React.Component {
 // 类组件必须有render函数。有自身状态State和生命周期。
 render() {
 return <h1 {...props}>test</h1>
 }
 }
 ReactDOM.render(<A />, el)
 

 <div className="title" ref="example">
 <span>123</span> // 原生DOM组件,首字母小写
 <ErrorPage title='123456' desc={[]}/> // 自定义组件,首字母大写
 </div>
 

 // JSX转译后js
 React.createElement(
 // type,标签名,原生DOM对象为String
 'div',
 // config,属性
 {
 className: 'title',
 ref: 'example'
 },
 // children,子元素
 React.createElement('span', null, '123'),
 React.createElement(
 // type,标签名,React自定义组件的type不为String.
 // _errorPage2.default为从其他文件中引入的React组件
 _errorPage2.default,
 {
 title: '123456',
 desc: []
 }
 )
 )
 

 // package/react/src/ReactElement.js
 ReactElement.createElement = function (type, config, children) {
 var propName;
 
 // 初始化参数
 var props = {};
 var key = null;
 var ref = null;
 var self = null;
 var source = null;
 
 // 从config中提取出内容,如ref key props
 if (config != null) {
 ref = config.ref === undefined ? null : config.ref;
 key = config.key === undefined ? null : '' + config.key;
 self = config.__self === undefined ? null : config.__self;
 source = config.__source === undefined ? null : config.__source;
 
 // 提取出config中的prop,放入props变量中
 for (propName in config) {
 if (config.hasOwnProperty(propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
 props[propName] = config[propName];
 }
 }
 }
 
 // 处理children,挂到props的children属性下
 var childrenLength = arguments.length - 2;
 if (childrenLength === 1) {
 // 只有一个参数时,直接挂到children属性下,不是array的方式
 props.children = children;
 } else if (childrenLength > 1) {
 // 不止一个时,放到array中,然后将array挂到children属性下
 var childArray = Array(childrenLength);
 for (var i = 0; i < childrenLength; i++) {
 childArray[i] = arguments[i + 2];
 }
 props.children = childArray;
 }
 
 // 取出组件类中的静态变量defaultProps,并给未在JSX中设置值的属性设置默认值
 if (type && type.defaultProps) {
 var defaultProps = type.defaultProps;
 for (propName in defaultProps) {
 if (props[propName] === undefined) {
 props[propName] = defaultProps[propName];
 }
 }
 }
 
 // 返回一个ReactElement对象
 return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
 };
 

 var ReactElement = function (type, key, ref, self, source, owner, props) {
 var element = {
 $$typeof: REACT_ELEMENT_TYPE, // 常量Symbol.for('react.element')
 
 // ReactElement对象上的四个变量,特别关键
 type: type, // 关键的识别类型,自定义组件一般为function,dom元素一般为string(tag)
 key: key, // VDOM diff需要,提升性能
 ref: ref, // 真实DOM的引用
 props: props, // 子结构相关信息(有则增加children字段/没有为空)和组件属性(如style)
 
 _owner: owner
 };
 return element;
 }
 

 // src/renderers/dom/ReactDOM.js
 var ReactDOM = {
 render: ReactMount.render,
 };
 
 // src/renderers/dom/client/ReactMount.js
 // nextElement即为AST对象(VNode Tree)
 render: function(nextElement, container, callback) {
 return ReactMount._renderSubtreeIntoContainer(
 null,
 nextElement,
 container,
 callback,
 );
 }
 

 _renderSubtreeIntoContainer: function(
 parentComponent,
 nextElement,
 container,
 ) {
 // 顶层包装
 // VNode.type = TopLevelWrapper,TopLevelWrapper是个函数
 var nextWrappedElement = React.createElement(TopLevelWrapper, {
 child: nextElement,
 });
 
 // 拿到之前的组件,更新时就进行对比
 // 初始渲染prevComponent = false
 var prevComponent = getTopLevelWrapperInContainer(container);
 
 if (prevComponent) {
 // 更新流程
 var prevWrappedElement = prevComponent._currentElement;
 var prevElement = prevWrappedElement.props.child;
 if (shouldUpdateReactComponent(prevElement, nextElement)) {
 var publicInst = prevComponent._renderedComponent.getPublicInstance();
 ReactMount._updateRootComponent(
 prevComponent,
 nextWrappedElement,
 );
 return publicInst;
 } else {
 // remove container节点下的所以元素
 ReactMount.unmountComponentAtNode(container); // while (container.lastChild) {container.removeChild(container.lastChild);}}
 }
 }
 
 // 根据AST type,1.创建对应component实例,2. 实例递归生成对应的HTML,3. innerHTML挂载到真实的DOM上
 var component = ReactMount._renderNewRootComponent(
 nextWrappedElement,
 container,
 )._renderedComponent.getPublicInstance();
 
 return component;
 }
 

 _renderNewRootComponent: function(
 nextElement,
 container,
 ) {
 // 创建component实例。instantiateReactComponent.js
 var componentInstance = instantiateReactComponent(nextElement, false);
 
 ReactUpdates.batchedUpdates(
 batchedMountComponentIntoNode, //回调函数
 );
 return componentInstance;
 },
 

 function batchedMountComponentIntoNode() {
 // 包装成事务方式
 transaction.perform(
 mountComponentIntoNode, // 回调
 );
 }
 

 function mountComponentIntoNode() {
 // 根据不同的组件类型(4种)类型,返回组件对应的HTML(下节详细讲述)
 // 等同于wrapperInstance.mountComponent
 var markup = ReactReconciler.mountComponent(wrapperInstance);
 
 // 给dom插入innerHTML
 ReactMount._mountImageIntoNode(
 markup,
 container,
 wrapperInstance
 );
 }
 

 _mountImageIntoNode: function(
 markup,
 container,
 instance
 ) {
 // 关键:container.innerHTML = markup;
 setInnerHTML(container, markup);
 // 将处理好的组件对象存储在缓存中,提高结构更新的速度。
 ReactDOMComponentTree.precacheNode(instance, container.firstChild);
 }