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方法源码:

小结

想学习这些知识进 java 内部学习群:725633148 阿里Java高级大牛直播讲解知识点,分享知识,多年工作经验的梳理和总结 带着大家全面 科学地建立自己的技术体系和技术认知!

组件的挂载

我们知道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。

想学习这些知识进 java 内部学习群:725633148 阿里Java高级大牛直播讲解知识点,分享知识,多年工作经验的梳理和总结 带着大家全面 科学地建立自己的技术体系和技术认知!

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试