[JavaScript知识库]React、Jsx实现原理

记录

1、jsx由babel.js渲染，它可以将jsx语法渲染成对应的js语法。

2、我们使用ReactDOM.render(新建的DOM，被渲染的DOM在body中对应的标签)函数来渲染Dom，而新建的DOM我们一般使用jsx语法来完成，babel是如何渲染的呢？

我们来看一个示例：

<div className="box">
	<div className="header">
		<h2 title="标题">我是标题1</h2>
		<h2 title="标题">我是标题2</h2>
	</div>
	<div className="body">
		<h2 title="标题">我是标题1</h2>
		<h2 title="标题">我是标题2</h2>
	</div>
</div>

我使用babel官网提供的工具抓换：最终会被渲染成：

"use strict";

/*#__PURE__*/
React.createElement("div", {
  className: "box"
}, /*#__PURE__*/React.createElement("div", {
  className: "header"
}, /*#__PURE__*/React.createElement("h2", {
  title: "\u6807\u9898"
}, "\u6211\u662F\u6807\u98981"), /*#__PURE__*/React.createElement("h2", {
  title: "\u6807\u9898"
}, "\u6211\u662F\u6807\u98982")), /*#__PURE__*/React.createElement("div", {
  className: "body"
}, /*#__PURE__*/React.createElement("h2", {
  title: "\u6807\u9898"
}, "\u6211\u662F\u6807\u98981"), /*#__PURE__*/React.createElement("h2", {
  title: "\u6807\u9898"
}, "\u6211\u662F\u6807\u98982")));

然后我们看到React.createElement的源码：

React.createElement(var dom, var config, var children) {
	// ...
}

所有的标签对都被解析成了React.createElement函数，该函数无副作用，用于创建ReactElement虚拟Dom对象。

虚拟Dom

我们由React.createElement()函数创建虚拟Dom树，其实就是一棵自定义的javascript对象树，该Dom树会被最终调用的ReatDOM.render()函数渲染成真实的DOM。
而React Native只是在渲染这一步的操作不一样，其他地方的操作都是一样的。
树立一下流程：
jsx语法 -> babel渲染成React.createElement()函数 -> 虚拟DOM树 -> ReactDOM.render函数转成真实DOM。

为什么需要虚拟DOM？
1、帮助我们有命令式编程变成声明式编程。
2、有助于提升性能，帮助虚拟DOM一次渲染到真实DOM树中，使用DocumentFragment等渲染方法。