大家好，我是微微笑的蜗牛，🐌。
上一篇文章我们讲述了如何描述 dom 节点信息，使用 type+props 的方式，但是写起来有些繁琐。
这一篇文章将会介绍 jsx，简化描述。
jsx
jsx 是一种语法糖，是 js 的语法扩展，可以在 js 代码中嵌入 xml。
比如下面这段 jsx 代码：
/** @jsx createElement */
const element = (
<div id="container">
<input value="foo" type="text" />
<a href="/bar">bar</a>
<span onClick={e => alert("Hi")}>click me</span>
</div>
);
但 jsx 代码最终还是会转换为 js 代码的，这就需要使用到 babel 插件。
经过 babel 转义后，将变成下面这个样子，以函数调用的方式。
PS：可使用 babel jsx 在线转义 来查看转换后的信息。
const element = createElement(
"div",
{ id: "container" },
createElement("input", { value: "foo", type: "text" }),
createElement(
"a",
{ href: "/bar" },
"bar"
),
createElement(
"span",
{ onClick: e => alert("Hi") },
"click me"
)
);
createElement 方法名可以自定义，它是根据注释 /** @jsx createElement */ 指定的名称而来。
若想换个名字，修改 /** @jsx 后的值即可。它的返回值为上一节中的描述信息，{ type:'xx', props: {} }。
createElement 方法的原型如下：
function createElement(type, config, ...args);
其中 type 为类型，config 为属性，args 可变参数为子节点。
而子节点又可分为字符串和使用 createElement 创建的描述信息，所以需要区分处理。
因此，通过 babel 插件的能力，我们只需要定义自己的 createElement 即可。
createElement
这里主要是处理 args 的类型。
- 当为字符串时，表示文本，需额外转换为我们定义的结构；
- 当为对象时，表示描述信息，无需处理。
// jsx 经 babel 转换后，会变成调用 createElement 的形式
function createElement(type, config, ...args) {
let props = Object.assign({}, config);
const hasChildren = args.length > 0;
const rawChildren = hasChildren ? [].concat(...args) : [];
// 过滤空子节点，并将文本特殊处理
props.children = rawChildren
.filter((c) => {
const result = c != null && c != false;
if (result) {
return c;
}
})
.map((c) => {
// 当为对象时，直接返回；当为字符串，创建文本节点信息
let result = c instanceof Object ? c : createTextElement(c);
return result;
});
return { type, props };
}
// 创建文本节点信息
function createTextElement(value) {
return createElement(TEXT_ELEMENT, { nodeValue: value });
}
这样，就基本上完成了大体实现，之前的 render 方法不用动。
babel 配置
我们需要配置 babel 插件，将 jsx 转换为 js。
在工程目录下新建 .babelrc，设置插件 transform-react-jsx：
{
"plugins": [
[
"transform-react-jsx",
{
"pragma": "SLReact.createElement"
}
]
]
}
其中 pragma 指定了 jsx 转换时要被替换成的方法名。默认是 React.createElement，这里将其指定为自定义的方法 SLReact.createElement。
webpack 配置
新建 webpack.config.js 文件，添加 babel-loader 处理器，对 js 文件进行预处理。
const fs = require("fs");
const path = require("path");
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
module.exports = {
entry: resolveApp("./index.js"),
target: "web",
mode: process.env.WEBPACK_SERVE ? "development" : "production",
devtool: "source-map",
output: {
path: resolveApp("./public"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.js|jsx$/,
loader: "babel-loader",
},
],
},
};
测试代码
import SLReact from "./slreact.js";
const stories = [
{ name: "part1", url: "http://bit.ly/2pX7HNn" },
{ name: "part2", url: "http://bit.ly/2qCOejH" },
{ name: "part3", url: "http://bit.ly/2qGbw8S" },
{ name: "part4", url: "http://bit.ly/2q4A746" },
{ name: "part5", url: "http://bit.ly/2rE16nh" },
];
const appElement = (
<div>
<ul>{stories.map(storyElement)}</ul>
</div>
);
// 生成 element 结构
function storyElement({ name, url }) {
const likes = Math.ceil(Math.random() * 100);
return (
<li>
<button>{likes}🐶</button>
<a href={url}>{name}</a>
</li>
);
}
SLReact.render(appElement, document.getElementById("root"));
这样，我们就不需要手写繁琐的描述信息了，用 jsx 直接编写就好，看起来会清爽很多。
完整代码可查看：https://github.com/silan-liu/slreact/tree/master/part2。
总结
这一篇主要介绍了 jsx 背后的流程，以及如何实现自定义的 createElement 方法。
下一篇将会介绍 virtual dom，敬请期待~
