React源码分析

下面是一个简单的组件 打印一下这个组件，发现其实是一个js对象，而不是真实的dom。 那么react是如何将react组件生成js对象的呢？ 这是因为我们在创建组件的时候，使用了extends.React.Component,即继承了Component，看下Component的源码

function Component(props, context, updater) { this.props = props; this.context = context; this.refs = emptyObject; // renderer.this.updater = updater || ReactNoopUpdateQueue; } Component.prototype.setState = function (partialState, callback) {} Component.prototype.forceUpdate = function (callback) {}

我们声明了一个组件，继承了Component，它的原型上有setState等方法。 小结

组件初始化

我们在react类和我们平时写的js类都一样，唯一的区别在与react类多了一个render()方法，输出类似“这是A组件”的结构并挂载到真实DOM上，才能触发组件的生命周期并成为DOM树的一部分。 首先我们看下render()方法

发现render()实际是是调用一个React.creatEment('div',null)，实际是实际是ReactElement方法 这个方法的作用是：每一个组件的对象都是通过React.creatEment()创建出来的ReactElement类型的对象，ReactElement对象记录了组件的特征，比如key,type,ref,props等，这些特征与渲染成页面息息相关。 下图是ReactElement方法源码：

小结

组件的挂载

我们知道react是通过ReactDOM.render(component,monutNode)的形式进行挂载的（可以挂载自定义组件，原生dom,字符串） 挂载过程是怎么样的呢？

ReactDOM.render实际调用了内部的ReactMount.render，进而执行ReactMount._renderSubtreeIntoContainer。从字面意思上就可以看出是将"子DOM"插入容器的逻辑，我们看下源码实现:

render: function (element, container, callback) { return renderSubtreeIntoContainer(null, element, container, false, callback); }, function renderSubtreeIntoContainer(parentComponent, children, container, forceHydrate, callback){}

我们看下renderSubtreeIntoContainer的入参：

parentComponent：当前组件的父组件，第一次渲染时为null children：要插入DOM中的组件，如helloWorld container：要插入的容器，如document.getElementById('root')

小结

组件的生命周期

我们知道，根据ReactDOM.render()的入参类型不同，在内部通过工厂方法生成四种不同类型的封装组件：

ReactEmptyComponent（空对象）

ReactTextComponent（字符串）

ReactDOMComponent（原生dom）

ReactCompositeComponent（自定义组件，这个类型才会有生命周期）

在执行挂载流程时，通过执行每种封装组件内部的mountComponent方法触发生命周期，但显然生命周期只在React自定义组件中存在，也就是ReactCompositeComponent。