上次我们总结了 React 代码构建后的 webpack 模块组织关系，今天来介绍一下 Babel 编译 JSX 生成目标代码的一些规则，并且写一个简单的解析器，模拟整个生成的过程。
我们还是拿最简单的代码举例：
import {greet} from './utils';
const App = {greet('scott')}
;
ReactDOM.render(App, document.getElementById('root'));这段代码在经过Babel编译后，会生成如下可执行代码：
var _utils = __webpack_require__(1);
var App = React.createElement(
'h1',
null,
(0, _utils.greet)('scott')
);
ReactDOM.render(App, document.getElementById('root'));看的出来，App 是一个 JSX 形式的元素，在编译后，变成了 React.createElement() 方法的调用，从参数来看，它创建了一个 h1 标签，标签的内容是一个方法调用返回值。我们再来看一个复杂一些的例子：
import {greet} from './utils';
const style = {
color: 'red'
};
const App = (
This is a JSX demo
);
ReactDOM.render(App, document.getElementById('root'));编译之后，会生成如下代码：
var _utils = __webpack_require__(1);
var style = {
color: 'red'
};
var App = React.createElement(
'div',
{ className: 'container' },
React.createElement(
'h1',
{ style: style },
(0, _utils.greet)('scott'),
' hah'
),
React.createElement(
'p',
null,
'This is a JSX demo'
),
React.createElement(
'div',
null,
React.createElement(
'input',
{ type: 'button', value: 'click me' }
)
)
);
ReactDOM.render(App, document.getElementById('root'));从上面代码可以看出，React.createElement 方法的签名大概是下面这个样子：
React.createElement(tag, attrs, ...children);第一参数是标签名，第二个参数是属性对象，后面的参数是 0 到多个子结点。如果是自闭和标签，只生成前两个参数即可，如下：
// JSX
const App = ;
// 编译结果
var App = React.createElement('input', { type: 'button', value: 'click me' });现在，我们大概了解了由 JSX 到目标代码这中间的一些变化，那么我们是不是能够模拟这个过程呢？
要模拟整个过程，需要两个步骤：首先将 JSX 解析成树状数据结构，然后根据这个树状结构生成目标代码。
下面我们就来实际演示一下，假如有如下代码片段：
const style = {
color: 'red'
};
function greet(name) {
return `hello ${name}`;
}
const App = (
this is jsx-like code
parsing it now
![]()
);我们在 JSX 中引用到了 style 变量和 greet() 函数，对于这些引用，在后期生成可执行代码时，会保持原样输出，直接引用当前作用域中的变量或函数。注意，我们可能覆盖不到 JSX 所有的语法规则，这里只做一个简单的演示即可，解析代码如下：
// 解析JSX
const parseJSX = function () {
const TAG_LEFT = '<';
const TAG_RIGHT = '>';
const CLOSE_SLASH = '/';
const WHITE_SPACE = ' ';
const ATTR_EQUAL = '=';
const DOUBLE_QUOTE = '"';
const LEFT_CURLY = '{';
const RIGHT_CURLY = '}';
let at = -1; // 当前解析的位置
let stack = []; // 放置已解析父结点的栈
let source = ''; // 要解析的JSX代码内容
let parent = null; // 当前元素的父结点
// 寻找目标字符
let seek = (target) => {
let found = false;
while (!found) {
let ch = source.charAt(++at);
if (ch === target) {
found = true;
}
}
};
// 向前搜索目标信息
let explore = (target) => {
let index = at;
let found = false;
let rangeStr = '';
while (!found) {
let ch = source.charAt(++index);
if (target !== TAG_RIGHT && ch === TAG_RIGHT) {
return {
at: -1,
str: rangeStr,
};
}
if (ch === target) {
found = true;
} else if (ch !== CLOSE_SLASH) {
rangeStr += ch;
}
}
return {
at: index - 1,
str: rangeStr,
};
};
// 跳过空格
let skipSpace = () => {
while (true) {
let ch = source.charAt(at + 1);
if (ch === TAG_RIGHT) {
at--;
break;
}
if (ch !== WHITE_SPACE) {
break;
} else {
at++;
}
}
};
// 解析标签体
let parseTag = () => {
if (stack.length > 0) {
let rangeResult = explore(TAG_LEFT);
let resultStr = rangeResult.str.replace(/^\n|\n$/, '').trim();
if (resultStr.length > 0) {
let exprPositiOns= [];
resultStr.replace(/{.+?}/, function(match, startIndex) {
let endIndex = startIndex + match.length - 1;
exprPositions.push({
startIndex,
endIndex,
});
});
let strAry = [];
let currIndex = 0;
while (currIndex
if (source.charAt(at + 1) === CLOSE_SLASH) {
at++;
let endResult = explore(TAG_RIGHT);
if (endResult.at > -1) {
// 栈结构中只有一个结点 当前是最后一个闭合标签
if (stack.length === 1) {
return stack.pop();
}
let completeTag = stack.pop();
// 更新当前父结点
parent = stack[stack.length - 1];
parent.children.push(completeTag);
at = endResult.at;
parseTag();
return completeTag;
}
}
let tagResult = explore(WHITE_SPACE);
let elem = {
tag: tagResult.str,
attrs: {},
children: [],
};
if (tagResult.at > -1) {
at = tagResult.at;
}
// 解析标签属性键值对
while (true) {
skipSpace();
let attrKeyResult = explore(ATTR_EQUAL);
if (attrKeyResult.at === -1) {
break;
}
at = attrKeyResult.at + 1;
let attrValResult = {};
if (source.charAt(at + 1) === LEFT_CURLY) {
// 属性值是引用类型
seek(LEFT_CURLY);
attrValResult = explore(RIGHT_CURLY);
attrValResult = {
at: attrValResult.at,
info: {
type: 'ref',
value: attrValResult.str,
}
};
} else {
// 属性值是字符串类型
seek(DOUBLE_QUOTE);
attrValResult = explore(DOUBLE_QUOTE);
attrValResult = {
at: attrValResult.at,
info: {
type: 'str',
value: attrValResult.str,
}
};
}
at = attrValResult.at + 1;
skipSpace();
elem.attrs[attrKeyResult.str] = attrValResult.info;
}
seek(TAG_RIGHT);
// 检测是否为自闭合标签
if (source.charAt(at - 1) === CLOSE_SLASH) {
// 自闭合标签 追加到父标签children中 然后继续解析
if (stack.length > 0) {
parent.children.push(elem);
parseTag();
}
} else {
// 有结束标签的 入栈 然后继续解析
stack.push(elem);
parent = elem;
parseTag();
}
return elem;
};
return function (jsx) {
source = jsx;
return parseTag();
};
}(); 在解析 JSX 时，有以下几个关键步骤：
1. 解析到 `<` 时，表明一个标签的开始，接下来开始解析标签名，比如 div。
2. 在解析完标签名之后，试图解析属性键值对，如果存在，则检测 `=` 前后的值，属性值可能是字符串，也可能是变量引用，所以需要做个区分。
3. 解析到 `>` 时，表明一个标签的前半部分结束，此时应该将当前解析到的元素入栈，然后继续解析。
4. 解析到 `/>` 时，表明是一个自闭合元素，此时直接将其追加到栈顶父结点的 children 中。
5. 解析到 `接下来，我们调用上面的 parseJSX() 方法，来解析示例代码：
const App = (`
this is jsx-like code
parsing it now
![]()
`);
let root = parseJSX(App);
console.log(JSON.stringify(root, null, 2));生成的树状数据结构如下所示：
{
"tag": "div",
"attrs": {
"className": {
"type": "str",
"value": "container"
}
},
"children": [
{
"tag": "p",
"attrs": {
"style": {
"type": "ref",
"value": "style"
}
},
"children": [
{
"type": "str",
"value": "saying "
},
{
"type": "expr",
"value": "greet('scott')"
},
{
"type": "str",
"value": " hah"
}
]
},
{
"tag": "div",
"attrs": {},
"children": [
{
"tag": "p",
"attrs": {},
"children": [
{
"type": "str",
"value": "this is jsx-like code"
}
]
},
{
"tag": "i",
"attrs": {
"className": {
"type": "str",
"value": "icon"
}
},
"children": []
},
{
"tag": "p",
"attrs": {},
"children": [
{
"type": "str",
"value": "parsing it now"
}
]
},
{
"tag": "img",
"attrs": {
"className": {
"type": "str",
"value": "icon"
}
},
"children": []
}
]
},
{
"tag": "input",
"attrs": {
"type": {
"type": "str",
"value": "button"
},
"value": {
"type": "str",
"value": "i am a button"
}
},
"children": []
},
{
"tag": "em",
"attrs": {},
"children": []
}
]
}在生成这个树状数据结构之后，接下来我们要根据这个数据描述，生成最终的可执行代码，下面代码可用来完成这个阶段的处理：
// 将树状属性结构转换输出可执行代码
function transform(elem) {
// 处理属性键值对
function processAttrs(attrs) {
let result = [];
let keys = Object.keys(attrs);
keys.forEach((key, index) => {
let type = attrs[key].type;
let value = attrs[key].value;
// 需要区分字符串和变量引用
let keyValue = `${key}: ${type === 'ref' ? value : '"' + value + '"'}`;
if (index {
// 子结点是标签元素
if (child.tag) {
content += processElem(child, elem);
return;
}
// 以下处理文本结点
if (child.type === 'expr') {
// 表达式
content += child.value;
} else {
// 字符串字面量
content += `"${child.value}"`;
}
if (index 我们来调用一下 transform() 方法：
let root = parseJSX(App);
let code = transform(root);
console.log(code);运行完上述代码，我们会得到一个目标代码字符串，格式化显示后代码结构是这样的：
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
)
);我们还需要将上下文代码拼接在一起，就像下面这样：
const style = {
color: 'red'
};
function greet(name) {
return `hello ${name}`;
}
const 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
)
);看上去是有几分模样了哈，那么如何实现 React.createElement() 方法，将上面的代码运行起来并输出预期的效果呢，我们会在下一篇文章中介绍。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有