谈谈JSX的编译原理

说起JSX，几乎无人不知：它在React扮演着描述了UI界面、关联渲染逻辑的重要角色。但JSX如何被编译、又如何变成一个个的元素，相信就没那么多人知道了。本文将对JSX编译结果分析，以加深对React里JSX工作原理的理解

准备JSX编译环境

需要安装三个包(开发依赖)

• @babel/cli
• @babel/core
• @babel/preset-react

安装完毕在根目录添加配置文件.babelrc,内容如下：

{
   
  "presets": ["@babel/preset-react"]
}

最后在终端里输入命令：
npx babel .\index.jsx -w -o .\index.js
将index.jsx编译到index.js，并开启修改监听模式

基本示例

const h1 = <h1>this is a H1 Tag</h1>

经过babel编译：

const h1 = React.createElement("h1", null, "this is a H1 Tag");

可以看到babel会对JSX进行解析，而后将DOM节点相关的数据片作为参数传递给React.createElement方法调用，这个方法是干嘛的呢?

React.createElement被链接到一个名为createElementWithValidation的函数，它有三类参数：

• type：表示节点的类型
• props：表示节点的属性
• children-表示节点的子元素(可能有多个)

function createElementWithValidation(type, props, children) {
   
  //...
  var element = createElement.apply(this, arguments);
  //...
  return element;
}