基础知识
1、jsx 转换 javascript
对于每一个 jsx 标签,babel 插件都会转换成 js 代码,例如:
如下标签结构,
<div id="div_1" key="key1">
<div class="div_2">dom转换测试</div>
</div>
转换后的结构是:
React.createElement(
"div",
{id: "div_1", key: "key1"},
React.createElement(
"div",
{class: "div_2"},
"dom转换测试"
)
)
对于自定义的组件,必须定义成大驼峰格式,createElement 第一个参数会将定义的组件当做变量来引入,例如:
function ItemList(){
return <div>item</div>;
}
<ItemList key="item">
<span>asdf</span>
</ItemList>
转换之后的结果:
function ItemList() {
return React.createElement("div", null, "item");
}
React.createElement(
ItemList,
{ key: "item" },
React.createElement("span", null, "asdf")
);
对比将自定义组件些微小写的效果,
function itemList(){
return <div>item</div>;
}
<itemList key="item">
<span>asdf</span>
</itemList>
转换后的结果:
function itemList() {
return /*#__PURE__*/React.createElement("div", null, "item");
}
React.createElement(
"itemList",
{ key: "item" },
React.createElement("span", null, "asdf")
);
可以看到,转换后的 ItemList 是作为变量传入 createElement 方法内,而 div、span等标签会作为一个字符串常量传入 createElement 方法,当将自定义组件名改为小写时,也是作为字符串常量传入 API 内,在react中,如果是字符串常量,会被认为是原生的 dom 节点,在运行时会报错。
推荐转换测试工具 babel
持续更新......
网友评论