React.createElement()
JSX 即 JS 的拓展,拓展了 JS 的语法,使得可以写 HTML 标签而不报错
或许这时你想到了世界上最好的语言,两者表面上确实也很相似,只不过用 PHP 写模板时,HTML 是主体,用 JSX 时,JS 才是主体
理解 JSX 最简单也是最好的方法就是去多看一下编译结果:https://www.babeljs.cn/repl
在 JS 文件中写的标签都会被编译成 React.createElement()
的函数调用
<div role="button"></div>
会被编译成
React.createElement("div", {
role: "button"
});
可以看到,第一个参数是标签名,第二个参数是一个指定 attribute 的对象
复杂一点的
<div className="card">
<input type="text" /> <!-- 不同于HTML5, JSX 必须加 / 结束标签 -->
<button>submit</button>
</div>
编译结果为
React.createElement(
"div",
{ className: "card" },
React.createElement("input", { type: "text" }),
React.createElement("button", null, "submit")
);
第三个参数及其之后的参数就是元素的内容了,这里 div
里面是 input
和 button
所以第三个参数和第四个参数是嵌套的 React.createElement()
调用
React 组件
<Welcome name="nada" />
会被编译成
React.createElement(Welcome, { name: "nada" });
通过 JSX 的编译结果,我们知道了为什么组件名必须大写字母开头
组件名如果不规定大写字母开头,就无法辨别是组件还是原生 DOM 元素
规定了之后,就可以很轻松的辨别出,并编译成 React.createElement()
调用
组件的话第一个参数就传入相应的类,原生 DOM 元素就传入相应字符串
React 元素
React.createElement()
会预先执行一些检查,然后返回一个 JS 对象,下面代码是简化后的,实际要更复杂
{
type: 'div',
props: {
className: 'card',
children: [
{
type: 'input',
props: {
type: 'text'
}
},
{
type: 'button',
props: {
chilren: 'submit'
}
}
]
}
}
这些对象被称为 React 元素,与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象,React DOM 会负责更新 DOM 来与 React 元素保持一致
JSX 中标签是嵌套的,编译成的 React.createElement()
也是嵌套的,那返回的对象自然也是嵌套的
React DOM 就是使用这样的嵌套对象来构建用户界面