React要学习的顶层API对于原生DOM来说创建元素需要下面这些复杂的步骤，而且相对于虚拟DOM来说，每一次对已经渲染

要学习的顶层API 之 createElement

createElement

对于原生DOM来说创建元素需要下面这些复杂的步骤，而且相对于虚拟DOM来说，每一次对已经渲染的DOM进行插入更新元素是十分消耗性能的。

// 创建一个按钮
let btn = document.createElement('button')
let btnText = document.createTextNode('click me')
btn.appendChild(t)
document.body.appendChild(btn)

<!--result -->
<button>click me</button>

React.createElement 是一个更加高级的函数，React的createElement的第一个参数为元素名称，第二个参数为该元素的一些属性，第二个参数之后接受子元素。所以createElement实际上创建了一个树。

下面为引用代码

const InputForm = React.createElement(
  "form",
  { target: "_blank", action: "https://google.com/search" },
  React.createElement("div", null, "Enter input and click Search"),
  React.createElement("input", { className: "big-input" }),
  React.createElement(Button, { label: "Search" }) // 嵌套React DOM
);

// InputForm 使用 Button 组件，所以我们需要这样做：
function Button (props) {
  return React.createElement(
    "button",
    { type: "submit" },
    props.label
  );
}
// 这里的InputForm是React元素而不是组件，我们可以通过 .render 方法直接使用 InputForm
// ReactDOM.render(React元素, 渲染的目标Node);
ReactDOM.render(InputForm, mountNode);

最后渲染的DOM

<form target="_blank" action="https://google.com/search">
    <div>Enter input and click Search</div>
    <input className="big-input" />
    <Button label="Search" />
    <!-- Button组件转换
    <button type="submit">Search</button>
    -->
</form>

如果这样写React DOM的话，那是不是要疯掉，这就是 jsx 在react中存在的意义。为了让我门可以用类似 html 语法来写页面或组件。当然，jsx 是可以单独使用的，不仅仅是适用于React。