轻松搞懂React.createElement()

官方的介绍：https://react.docschina.org/docs/react-api.html#createelement

初学React时，打开React官网首页的示例项目，发现在不使用jsx时，代码的渲染是这样的：

这看起来有点懵，为什么是这样写的？参数又如何传呢？

于是进入到官网的createElementapi介绍页，就说了这么个东西：

看了这个介绍，我脑海中就直接冒出了一个黑人问号脸的表情包。除了解释了的type，props是什么？类型是什么？children是什么？

props：搜索了一番资料了解到，props是一个对象，这个对象里面的属性内容可以给当前元素设定相关属性（包括属性名，事件等）

children：根据官方的资料总结得出，这个children指的是被渲染到节点的子节点。你可以把这些子节点当做createElement的参数一个一个放如函数，也可以用数组包裹住这些子元素，createElment会自动展开这个数组。需要注意的是，子元素被渲染的顺序和参数顺序一致。

要说的几个坑点：

1. 官方不解释清楚被中括号包裹的props是什么，也不解释中括号是不是就表示数组，搞得不试一下的话，还以为props可以是多个内容放在数组中的；
2. 假使理解了中括号不是一个数组，而理解为这个参数为可选参数，那么却又有示例允许这个children参数可以被数组包裹；

最后看一个非完整代码的示例，更清晰明白createElement的用法：
方式一，不用数组包裹子元素：

const React = window.React;
const ReactDOM = window.ReactDOM;
const root = document.querySelector("#root");
let n = 0;
const App = () =>
  React.createElement(
    "div",
    /* 不设置元素属性和事件，这里就传 null */
    null,
    React.createElement("p", null, "666"),
    n,
    React.createElement(
        "button",
        {
          className: "red",
          onClick() {
            n += 1;
            ReactDOM.render(App(), root);
          }
        },
        "+1"
      ),
    React.createElement("span", null, "ccc")
  );
ReactDOM.render(App(), root);

方式二，数组包裹子元素：

const React = window.React;
const ReactDOM = window.ReactDOM;
const root = document.querySelector("#root");
let n = 0;
const App = () =>
  React.createElement(
    "div",
    /* 不设置元素属性和事件，这里就传 null */
    null,
    [    
      React.createElement("p", null, "666"),
        n,
        React.createElement(
            "button",
            {
              className: "red",
              onClick() {
                n += 1;
                ReactDOM.render(App(), root);
              }
            },
            "+1"
          ),
        React.createElement("span", null, "ccc")],  
  );
ReactDOM.render(App(), root);