React: Babel编译JSX生成代码
上次我们总结了 React 代码构建后的 webpack 模块组织关系，今天来介绍一下 Babel 编译 JSX 生成目标代码的一些规则，并且写一个简单的解析器，模拟整个生成的过程。
我们还是拿最简单的代码举例：
import {greet} from './utils';
const App = <h1>{greet('scott')}</h1>;
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 = (
<div className="container">
<h1 style={style}>{greet('scott')} hah</h1>
<p>This is a JSX demo</p>
<div>
<input type="button" value="click me" />
</div>
</div>
);
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 = <input type="button" value="click me" />;
// 编译结果
var App = React.createElement('input', { type: 'button', value: 'click me' });
现在，我们大概了解了由 JSX 到目标代码这中间的一些变化，那么我们是不是能够模拟这个过程呢？
要模拟整个过程，需要两个步骤：首先将 JSX 解析成树状数据结构，然后根据这个树状结构生成目标代码。
下面我们就来实际演示一下，假如有如下代码片段：
const style = {
color: 'red'
};
function greet(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>
);
我们在 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 < resultStr.length) {
// 没有表达式了
if (exprPositions.length < 1) {
strAry.push({
type: 'str',
value: resultStr.substring(currIndex),
});
break;
}
let expr = exprPositions.shift();
strAry.push({
type: 'str',
value: resultStr.substring(currIndex, expr.startIndex),
});
strAry.push({
type: 'expr',
value: resultStr.substring(expr.startIndex + 1, expr.endIndex),
});
currIndex = expr.endIndex + 1;
}
parent.children.push(...strAry);
at = rangeResult.at;
parseTag();
return parent;
}
}
seek(TAG_LEFT);
// 闭合标记 例如: </div>
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. 解析到 `</` 时，表明是标签的后半部分，一个完整标签结束了，此时弹出栈顶元素，并将这个元素追加到当前栈顶父结点的 children 中。
6. 最后一个栈顶元素出栈，整个解析过程完毕。
接下来，我们调用上面的 parseJSX() 方法，来解析示例代码：
const App = (`
<div className="container">
<p style={style}>{greet('scott')}</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>
`);
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 < keys.length - 1) {
keyValue += ',';
}
result.push(keyValue);
});
if (result.length < 1) {
return 'null';
}
return '{' + result.join('') + '}';
}
// 处理结点元素
function processElem(elem, parent) {
let content = '';
// 处理子结点
elem.children.forEach((child, index) => {
// 子结点是标签元素
if (child.tag) {
content += processElem(child, elem);
return;
}
// 以下处理文本结点
if (child.type === 'expr') {
// 表达式
content += child.value;
} else {
// 字符串字面量
content += `"${child.value}"`;
}
if (index < elem.children.length - 1) {
content += ',';
}
});
let isLastChildren = elem === parent.children[parent.children.length -1];
return (
`React.createElement(
'${elem.tag}',
${processAttrs(elem.attrs)}${content.trim().length ? ',' : ''}
${content}
)${isLastChildren ? '' : ','}`
);
}
return processElem(elem, elem).replace(/,$/, '');
}
我们来调用一下 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() 方法，将上面的代码运行起来并输出预期的效果呢，我们会在下一篇文章中介绍。
欢迎转载，转载请注明出处。
