React系列文章：JSX生成真实DOM结点
在上一篇文章中，我们介绍了Babel是如何将JSX代码编译成可执行代码的，随后也实现了一个自己的解析器，模拟了Babel编译的过程。
现在我们再来回顾一下，假定有如下业务代码：
const style = {
color: 'red',
fontSize: '20px',
};
const greet = function (name) {
return `hello ${name}`;
};
const App = (
<div className="container">
<p style={style}>saying {greet('scott')} hah</p>
<div>
<p>this is jsx-like code</p>
<i className="icon"/>
<p>parsing it now</p>
<img className="icon"/>
</div>
<input type="button" value="i am a button"/>
<em/>
</div>
);
console.log(App);
ReactDOM.render(App, document.getElementById('root'));经过编译之后，会生成下面的可执行代码：
var style = {
color: 'red',
fontSize: '20px'
};
var greet = function greet(name) {
return 'hello ' + name;
};
var App = React.createElement(
'div',
{ className: 'container' },
React.createElement(
'p',
{ style: style },
'saying ',
greet('scott'),
' hah'
),
React.createElement(
'div',
null,
React.createElement(
'p',
null,
'this is jsx-like code'
),
React.createElement('i', { className: 'icon' }),
React.createElement(
'p',
null,
'parsing it now'
),
React.createElement('img', { className: 'icon' })
),
React.createElement('input', { type: 'button', value: 'i am a button' }),
React.createElement('em', null)
);
console.log(App);
ReactDOM.render(App, document.getElementById('root'));引入所需的React库：
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="index.js"></script>
</body>
</html>运行以上代码，我们会发现控制台打印信息如下图所示：
从图中可以看出，type就是标签名，其他字段比较常用的有key、ref以及props，其中props中会包含className、style和children等字段。这些信息最终会映射成真实的DOM结点，所以这就是我们熟知的Virtual DOM，而ReactDOM.render()函数就是将虚拟DOM转换成真实DOM的工具。
我们现在可以得出一个结论，React.createElement()负责根据代码生成虚拟DOM，ReactDOM.render()负责将虚拟DOM映射到真实DOM上。
究竟React.createElement()和ReactDOM.render()是如何将程序转换成真实DOM的呢？接下来，我们就来试着实现React.createElement()和ReactDOM.render()的逻辑，模拟一下这个过程。
先来实现React.createElement()方法：
const React = {
// 创建DOM描述对象 即虚拟DOM
createElement(tag, attrs, ...children) {
let vnode = {
type: tag,
props: {
...attrs,
children,
}
};
return vnode;
}
};以上代码会生成下面的虚拟DOM结构：
然后是ReactDOM.render()方法：
const ReactDOM = {
// 渲染真实DOM
render(vnode, container) {
let realDOM = this.generateDOM(vnode);
container.appendChild(realDOM);
},
// 获取真实DOM
generateDOM(vnode) {
let elem = document.createElement(vnode.type);
// 特殊key值映射
let specialKeyMap = {
className: 'class',
fontSize: 'font-size',
};
let {props} = vnode;
// 设置DOM属性
props && Object.keys(props).forEach(key => {
if (key === 'children') {
// 处理子结点
props.children.forEach(child => {
if (typeof child === 'string') {
// 纯内容结点
elem.appendChild(document.createTextNode(child));
} else {
// DOM结点
elem.appendChild(this.generateDOM(child));
}
});
} else if (key === 'style') {
// 设置样式属性
let styleObj = props.style;
let styleItems = [];
Object.keys(styleObj).forEach(styleKey => {
styleItems.push(`${specialKeyMap[styleKey] || styleKey}:${styleObj[styleKey]}`);
});
elem.setAttribute('style', styleItems.join(';'));
} else {
// 设置其他属性
elem.setAttribute(specialKeyMap[key] || key, props[key]);
}
});
return elem;
}
};最后我们把前面引用的React库替换成上面我们自己实现的代码，然后运行，见证奇迹的时刻到了：
只需两段简短的代码，我们就生成了一个迷你版的虚拟DOM，并最终生成了真实的DOM结构，是不是很简单？当然，React所实现的功能远不止这些，我们后续会继续介绍。
React系列文章：JSX生成真实DOM结点的更多相关文章
- React: 无状态组件生成真实DOM结点
在上一篇文章中,我们总结并模拟了 JSX 生成真实 DOM 结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({ ...
- React: 有状态组件生成真实DOM结点
上次我们分析了无状态组件生成 DOM 的过程,无状态组件其实就是纯函数,它不维护内部的状态,只是根据外部输入,输出一份视图数据.而今天我们介绍的有状态组件,它有内部的状态,因此在组件的内部,可以自行对 ...
- React: JSX生成真实DOM结点
在上一篇文章中,我们介绍了 Babel 是如何将 JSX 代码编译成可执行代码的,随后也实现了一个自己的解析器,模拟了 Babel 编译的过程. 现在我们再来回顾一下,假定有如下业务代码: const ...
- React系列文章：无状态组件生成真实DOM结点
在上一篇文章中,我们总结并模拟了JSX生成真实DOM结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({name ...
- 从 0 到 1 实现 React 系列 —— 1.JSX 和 Virtual DOM
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
- React系列文章：Babel编译JSX生成代码
上次我们总结了React代码构建后的Webpack模块组织关系,今天来介绍一下Babel编译JSX生成目标代码的一些规则,并且模拟整个生成的过程. 我们还是拿最简单的代码举例: import {gre ...
- React系列文章：Webpack模块组织关系
现代前端开发离不开打包工具,以Webpack为代表的打包工具已经成为日常开发必备之利器,拿React技术栈为例,我们ES6形式的源代码,需要经过Webpack和Babel处理,才能生成发布版文件,在浏 ...
- 学习React系列（六）——更新dom细节于原理
React更新dom的依据: 1.不同类型的elements会产生不同的树 2.通过render方法中包含key属性的子元素,开发者可以示意哪些子元素可能是稳定的. 更新过程: 一.根元素类型不同:旧 ...
- React 系列文章(1)： npm 手动搭建React 运行实例 (新手必看)
摘 要 刚接触React 开发, 在摸索中构建react 运行环境,总会遇到各种坑:本文,将用最短时间解决webpack+react 环境搭建问题. 1.如果你还没有React基础 看这里. 2.如果 ...
随机推荐
- S5PV210 ADC转换
第一节 S5PV210的ADCS5PV210的ADC可支持10bit和12bit,它支持10路输入,然后将输入的模拟的信号转换为10bit或者12bit的二进制数字信号.在5MHz的时钟下,最大转换速 ...
- 50个常用的sql语句
50个常用的sql语句 Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C#,score) 成绩表 Teacher(T#,T ...
- 基于Jenkins，docker实现自动化部署（持续交互）【转】
前言 随着业务的增长,需求也开始增多,每个需求的大小,开发周期,发布时间都不一致.基于微服务的系统架构,功能的叠加,对应的服务的数量也在增加,大小功能的快速迭代,更加要求部署的快速化,智能化.因此 ...
- CBAM: 卷积块注意模块
CBAM: Convolutional Block Attention Module 论文地址:https://arxiv.org/abs/1807.06521 简介:我们提出了卷积块注意模块 ( ...
- STM32应用实例五：与SHT1X温湿度传感器通讯
在这次项目开发中应用到了SHT1X温湿度传感器,该系列有SHT10.SHT11和SHT15,属于Sersirion温湿度传感器家族中的贴片封装系列.包括一个电容性聚合体测湿敏感元件.一个用能隙材料制成 ...
- Mac下brew安装与配置mysql
一.打开mac控制台 $ brew install mysql 二.启动mysql服务 $ mysql.server start 三.初始化mysql配置 1 rainMacBook-Pro:~ co ...
- TestNG测试方法
@Test(enabled = false)有助于禁用此测试用例. 分组测试是TestNG中的一个新的创新功能,使用<groups>标记在testng.xml文件中指定分组. 它可以在&l ...
- python----线程进程协程
python线程: import threading import time def show(arg): time.sleep() print('thread' + str(arg)) ): t = ...
- python 全栈开发，Day66(web应用,http协议简介,web框架)
一.web应用 web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件.应用程序有两种模式C/S.B/S.C/S是客户端 ...
- 基于Linux平台的自动化运维Devops-----之自动化系统部署
一.自动化运维的背景网站业务上线,需要运维人员在短时间内完成几百台服务器部署,包括系统安装.系统初始化.软件的安装与配置.性能的监控......所谓运维自动化,即在最少的人工干预下,利用脚本与第三方工 ...