下面是一个简单的组件 打印一下这个组件,发现其实是一个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。
领取专属 10元无门槛券
私享最新 技术干货