JSX/React.createElement

JSX 实际上就是 React.createElement(component, props, …children) 的语法糖 所有的 jsx 最终都会被转换成 React.createElement 函数的调用.

以下有一段 jsx 代码：

<div>
  <header className="banner">Banner</header>
  <MyComponent style={{ color: "red" }}></MyComponent>
  <ul>
    <li>列表数据1</li>
    <li>列表数据2</li>
    <li>列表数据3</li>
  </ul>
  <div className="footer"></div>
</div>

经过 babel 转换后：

"use strict";

/*#__PURE__*/ React.createElement(
  "div",
  null,
  /*#__PURE__*/ React.createElement(
    "header",
    {
      className: "banner",
    },
    "Banner"
  ),
  /*#__PURE__*/ React.createElement(MyComponent, {
    style: {
      color: "red",
    },
  }),
  /*#__PURE__*/ React.createElement(
    "ul",
    null,
    /*#__PURE__*/ React.createElement("li", null, "\u5217\u8868\u6570\u636E1"),
    /*#__PURE__*/ React.createElement("li", null, "\u5217\u8868\u6570\u636E2"),
    /*#__PURE__*/ React.createElement("li", null, "\u5217\u8868\u6570\u636E3")
  ),
  /*#__PURE__*/ React.createElement("div", {
    className: "footer",
  })
);

稍微美化一下：

"use strict";

React.createElement(
  "div",
  null,
  React.createElement(
    "header",
    {
      className: "banner",
    },
    "Banner"
  ),
  React.createElement(MyComponent, {
    style: {
      color: "red",
    },
  }),
  React.createElement(
    "ul",
    null,
    React.createElement("li", null, "\u5217\u8868\u6570\u636E1"),
    React.createElement("li", null, "\u5217\u8868\u6570\u636E2"),
    React.createElement("li", null, "\u5217\u8868\u6570\u636E3")
  ),
  React.createElement("div", {
    className: "footer",
  })
);

createElement 的三个参数：type, config, config

1. type

• 当前 ReactElement 的类型
• 如果是标签元素，就使用字符串表示，比如”div”
• 如果是组件元素，就直接使用组建的名称

2. config

• 所有 jsx 中的属性都在 config 中以对象的键值对形式存储
• 比如传入 className 作为元素的 class

3. children

• 存放在标签中的内容，以 children 数组的方式进行存储
• 多个元素的话，React 内部有做处理