当前位置: 首页 > news >正文

【Under-the-hood-ReactJS-Part0】React源码解读

接上文---

完整流程图见:https://bogdan-lyashenko.gith...
继续我们的React之旅,让我们从ReactDOM.render的调用开始。

ReactDOM.render

ReactDOM.render是我们分析的入口点。我们的应用从这里开始渲染内容到DOM树中。为了方便调试,我们创建了一个<ExampleApplication/>的简单组件。整个流程的第一个动作就是把JSX转换成React elements 。 React elements就是带一些架构的简单对象。 他们就是用来表示组件render方法的返回值,除此之外,没有其他的。对象中的一些字段,如props,key,ref对于大家应该已经很熟悉了。 type属性表示的是JSX定义的标记对象,在我们的案例中,就是类 ExampleApplication, 当然,它也可以表示 Button标签的字符串格式等等。 同时,在React element的创建期间,React将会合并defaultProps和props(如果有声明的话),并且严重propTypes。
更多详情请查看源码 srcisomorphicclassicelementReactElement.js

ReactMount

在流程图中,你可以发现有个叫做ReactMount的模块。它包含了整个组件挂载的逻辑。
其实,ReactDOM中是没有任何逻辑的,它不过是一个用来调用ReactMount的接口,所以当调用ReactDOM.render方法时,技术上来说,你真正调用的是ReactMount.render方法。那么整个挂载过程到底是怎么样的呢?

Mounting is the process of initializing a React component by creating its representative DOM elements and inserting them into a supplied container.(挂载是指初始化一个React组件的过程,包括生成组件对应的DOM元素并插入指定的容器中)

以上文字来自于React代码的注释,那么这些到底是一个怎么样的过程呢?我们先看下以下的一个转化:
React需要将你组件里的JSX描述转化为对应的HTML结构,并插入到DOM树中,这个过程,
React需要处理所有的属性,绑定的事件,内嵌的组件和所有逻辑。挂载,就是指把用高层次语言描述的组件(JSX)转化为低层次的html代码,然后插入到DOM树中。

为了让以上描述更具体下,考虑如下需求:

目标:确保滚动事件被监听
在一个根组件的第一次渲染过程中,React会初始化滚动监听事件,并且把滚动条相关数值缓存起来,这样,当应用代码可以在不触发重排(reflow)的前提下,访问到滚动条相关数据。由于不同的游览器会有不同的实现,一些DOM的数值是非固定的,每次当你在代码中获取它们时,它们都有可能会重新计算。显然,这一步骤会引起一些性能问题。比如,一些老的游览器,是不支持pageX和pageY属性的。为了解决这个问题,React会做一些优化,而这些优化过程中,可能就会需要很多其它技巧。在其它问题中,React为了解决某个具体的问题,都会用到很多技巧,滚动条就是一个具体的列子。

实例化React组件

回顾下最开始的流程图,这里有一个实例创建的过程。事实上,目前去创建一个<ExampleApplication>的实例还有点早,这里我们真正实例化的是类TopLevelWrapper(React内部类)。我们先跳过这个过程,看下一个流程。

在JSX的转化过程中,这里有三个阶段。JSX转化成React elements后,React elements会被转化为以下内部React组件类型中的一:ReactCompositeComponent(开发自定义的组件),ReactDOMComponent(HTML DOM节点),ReactDOMTextComponent(文本节点)。我们先忽略ReactDOMTextComponent,重点放在前两个。

什么是内部组件呢?你可能已经听过虚拟DOM。虚拟DOM是一种DOM的表示方式,在React的diff差异计算以及其它过程中,使用虚拟DOM使得可以不直接DOM树,而这恰是React性能不错的原因之一。其实,在React的源码中,并没有什么文件或者类被称作虚拟DOM,因为虚拟DOM只是一种概念,一种用来描述如何处理真实DOM的手段。有些人可能会说虚拟DOM表示的就是React elements,但是我不这么认为。在我看来,虚拟DOM指的是这三个类:ReactCompositeComponent,ReactDOMComponent,ReactDOMTextComponent。稍后我会详细解释原因。

让我们继续组件的实例化。我们会创建一个ReactCompositeComponent的实例,但是,
这个实例并不是因为我们将<ExampleApplication/>放入ReactDOM.render中然后才生成的。React总是从TopLevelWrapper里开始渲染一个组件树。它几乎是一个纯包装组件,它的render方法(组件的render方法)将会返回<ExampleApplication/>。代码如下:

//src\renderers\dom\client\ReactMount.js#277
TopLevelWrapper.prototype.render = function () {
  return this.props.child;
};

根据以上代码,很显然只有一个TopLevelWrapper的实例被创建了,除此之外就没有其它的了。在继续下一步之前,我们看下以下内容:

DOM内嵌验证
几乎每次内嵌组件渲染时,它们都会被一个专门用来做HTML验证的模块--validateDOMNesting--来验证结构是否合法。所谓的DOM内嵌验证是指校验子模块和父模块的标签层次。比如,如果父组件的标签是<select>,子组件的标签只能是以下中的一个:optino,optgroup,#text。 这些规则都是在 https://html.spec.whatwg.org/... 被定义的。你很可能已经看到过这个模块的工作成果,它会产生如下的错误提醒:<div>不能为<p>的后代出现(<div> cannot appear as a descendant of <p> .)

好了,让我们回想下之前的内容,然后再回顾下挂载相关的流程图。 Part0的部分就是这些。

(未完待续)

相关文章:

  • c# is和as的区别
  • 各种面试题 挺好 挺重要 项目中 有用 的地方
  • Nginx 1.正向代理与反向代理
  • C++ 运行单个实例,防止程序多次启动
  • systemC的安装
  • 利用hadoop来解决“共同好友”的问题
  • zabbix监控apache
  • 创建Windows窗体 : WinMain() 与 WndProc()
  • 不要再被骗了------QQ盗号原理大揭秘
  • Heroku安装与使用
  • webpack 4.14配置详解
  • 中间有文字的分割线效果
  • ie6,ie7下overflow失效解决方法
  • 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
  • 关于DAMAGE: after Normal block的问题 【from http://blog.sina.com.cn/s/blog_a4864fde01014962.html】...
  • [分享]iOS开发-关于在xcode中引用文件夹右边出现问号的解决办法
  • 【跃迁之路】【733天】程序员高效学习方法论探索系列(实验阶段490-2019.2.23)...
  • CentOS7 安装JDK
  • Docker下部署自己的LNMP工作环境
  • Hexo+码云+git快速搭建免费的静态Blog
  • LeetCode刷题——29. Divide Two Integers(Part 1靠自己)
  • Meteor的表单提交:Form
  • scala基础语法(二)
  • spring cloud gateway 源码解析(4)跨域问题处理
  • TCP拥塞控制
  • Webpack 4 学习01(基础配置)
  • 后端_MYSQL
  • 数组大概知多少
  • 它承受着该等级不该有的简单, leetcode 564 寻找最近的回文数
  • 推荐一款sublime text 3 支持JSX和es201x 代码格式化的插件
  • [地铁译]使用SSD缓存应用数据——Moneta项目: 低成本优化的下一代EVCache ...
  • 我们雇佣了一只大猴子...
  • ​​​​​​​sokit v1.3抓手机应用socket数据包: Socket是传输控制层协议,WebSocket是应用层协议。
  • #{}和${}的区别?
  • #13 yum、编译安装与sed命令的使用
  • #传输# #传输数据判断#
  • #我与Java虚拟机的故事#连载03:面试过的百度,滴滴,快手都问了这些问题
  • #中国IT界的第一本漂流日记 传递IT正能量# 【分享得“IT漂友”勋章】
  • #周末课堂# 【Linux + JVM + Mysql高级性能优化班】(火热报名中~~~)
  • $.each()与$(selector).each()
  • (2)nginx 安装、启停
  • (C语言)球球大作战
  • (Java数据结构)ArrayList
  • (附源码)springboot学生选课系统 毕业设计 612555
  • (更新)A股上市公司华证ESG评级得分稳健性校验ESG得分年均值中位数(2009-2023年.12)
  • (免费领源码)Python#MySQL图书馆管理系统071718-计算机毕业设计项目选题推荐
  • (五)关系数据库标准语言SQL
  • (转)Sublime Text3配置Lua运行环境
  • (最优化理论与方法)第二章最优化所需基础知识-第三节:重要凸集举例
  • *上位机的定义
  • .net core 6 集成 elasticsearch 并 使用分词器
  • .Net Redis的秒杀Dome和异步执行
  • .NET Windows:删除文件夹后立即判断,有可能依然存在
  • .NET/C# 中设置当发生某个特定异常时进入断点(不借助 Visual Studio 的纯代码实现)
  • .NET企业级应用架构设计系列之结尾篇