进一步了解jsx的本质

所有的jsx代码最终都会被 babel 转为 react.createElment() 的函数调用。

const test1 = <h1>hello react</h1>
const test2 = react.createElement(“h1”, null, “hello react”);

ReactDOM.render(test1, document.getElementById("app"));

从上面的例子中，可以看出这个 react.createElement() 函数是需要传入3个参数的：

​ （1）第一个参数可以是元素标签也可以是组件名称。

​ （2）第二个参数为：属性（所有jsx的属性都是以key：value的形式在对象中存储的）

​ （3）第三个参数为：因为有可能是有多个子元素的，因此只需要在属性后面的/PURE/后面继续调用 react.createElement() 就行了（注意：第三个参数在这里是以数组的形式进行存储的)

render() {
        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
          className: "header"
        }, /*#__PURE__*/React.createElement("h1", {
          title: "\u6807\u9898"
        }, "\u6211\u662F\u6807\u9898")), /*#__PURE__*/React.createElement("div", {
          className: "content"
        }, /*#__PURE__*/React.createElement("h2", null, "\u6211\u662F\u9875\u9762\u7684\u5185\u5BB9"), /*#__PURE__*/React.createElement("button", null, "\u6309\u94AE"), /*#__PURE__*/React.createElement("button", null, "+1"), /*#__PURE__*/React.createElement("a", {
          href: "http://www.baidu.com"
        }, "\u767E\u5EA6\u4E00\u4E0B")), /*#__PURE__*/React.createElement("div", {
          className: "footer"
        }, /*#__PURE__*/React.createElement("p", null, "\u6211\u662F\u5C3E\u90E8\u7684\u5185\u5BB9")));
 }

在这里你或许会有个疑惑，函数的第3个参数明明只能传入一个参数，那它又是如何把那么多的子元素传入进去的呢？源码如下所示：

//这里先获取到减去第一二参数之后的长度
var childrenLength = arguments.length - 2;

//在这里我们会根据所剩余的长度来进行以下的判断
//如果剩余长度为1的话，那就表明没有子元素，直接赋值就行了
if (childrenLength === 1) {
    props.children = children;
//如果长度大于1的话，说明肯定是有子元素的，因此便会有以下的一系列操作了 
} else if (childrenLength > 1) {
    //根据所剩余的长度去新建一个数组
    var childArray = Array(childrenLength);

    //依次循环遍历将所有的子元素放入该数组中
    for (var i = 0; i < childrenLength; i++) {
        childArray[i] = arguments[i + 2];
    }
} // Resolve default props