React源码学习（一）JSX到JavaScript的转换

Posted on | | reads times

JSX到JavaScript的转换

babeljs 的作用

Babel 是一个 JavaScript 编译器
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

JSX 的作用

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。
JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。

JSX 是在 JavaScript 内部实现的。

我们知道元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。

要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上。

JSX到JavaScript的转换机制

html元素直接转换

1
2
3
<div class="ajlkda">
12321
</div>
1
2
3
4
5
"use strict";

React.createElement("div", {
  class: "ajlkda"
}, "12321");

多个参数，第一个参数表示元素表情名称，第二参数表示元素props，第三个参数表示元素子节点，以不定长度一个个传入。下面是多个子元素的例子：

1
2
3
4
5
<div class="ajlkda">
  <div>111</div>
  <div>111</div>
  <div>111</div>
</div>
1
2
3
4
5
6
7
8
9
"use strict";

React.createElement(
"div",
{class: "ajlkda"}, 
React.createElement("div", null, "111"), 
React.createElement("div", null, "111"), 
React.createElement("div", null, "111")
);

将元素以函数组件传入。组件名称为大写，生成js代码为变量名。

1
2
3
4
5
6
7
8
9
function Comp(){
  return <div class="ajlkda">
  <div>111</div>
</div>
}
<Comp key="value">  
  <div>111</div>
  <div>111</div>
</Comp>
1
2
3
4
5
6
7
8
9
10
11
"use strict";

function Comp() {
  return React.createElement("div", {
    class: "ajlkda"
  }, React.createElement("div", null, "111"));
}

React.createElement(Comp, {
  key: "value"
}, React.createElement("div", null, "111"), React.createElement("div", null, "111"));

当组件名称为小写时，组件名称为字符串。

1
2
3
4
5
6
7
8
9
function comp(){
  return <div class="ajlkda">
  <div>111</div>
</div>
}
<comp key="value">  
  <div>111</div>
  <div>111</div>
</comp>
1
2
3
4
5
6
7
8
9
10
11
"use strict";

function comp() {
  return React.createElement("div", {
    class: "ajlkda"
  }, React.createElement("div", null, "111"));
}

React.createElement("comp", {
  key: "value"
}, React.createElement("div", null, "111"), React.createElement("div", null, "111"));

根据以上实践可以发现，如果传递的是一个字符串，那么在创建虚拟DOM对象时，React会认为这是一个简单的HTML标签，但是自定义组件，若是小写组件名称，则被翻译为HTML标签，但显然组件并不是一个简单的HTML标签，因此去创建一个不存在的标签肯定是会报错的。