JSX的本质

先看一下JSX的常见写法

<script type="text/babel">
  const ele = <h2>Hello React!</h2>
    ReactDOM.render(ele, document.getElementById("app"));
</script>

JSX是语法糖，通过babel转成React.createElement函数，在babel官网上可以在线把JSX转成React的JS语法

JSX语法糖

script标签中不添加text/babel解析jsx语法的情况下：

<script>
  const ele = React.createElement("h2", null, "Hello React!");
  ReactDOM.render(ele, document.getElementById("app"));
</script>

JSX的本质是React.createElement()函数

最后一个参数并未写成可变参数的形式，为什么可以传入多个参数呢？

把右侧React的代码格式化一下：

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

根元素中有三个子元素，第二个子元素中也有4个子元素，所以function createElement(type, config, children) {}中的children是对应是多个参数，类似可变参数的写法。
React实际处理是怎样的呢？

事实上，JavaScript中参数在函数内部是以一个数组表示的，函数接收的始终是一个数组，可以通过arguments[n]来获取对应的参数。
当传入多个参数时，通过获取第三个以及以后参数。

createElement函数返回的对象是ReactEelement对象。
createElement的写法如下

class App extends React.Component {
  constructor() {
    super()
    this.state = {}
  }

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

ReactDOM.render(<App />, document.getElementById("app"));

实际开发中不会使用createElement来创建ReactElement的，一般都是使用JSX的形式开发。

ReactElement在程序中打印一下

render() {
  let ele = (
    <div>
      <div className="header">
        <h1 title="标题">我是标题</h1>
      </div>
      <div className="content">
        <h2>我是页面的内容</h2>
        <button>按钮</button>
        <button>+1</button>
        <a href="http://www.baidu.com">百度一下</a>
      </div>
      <div className="footer">
        <p>我是尾部的内容</p>
      </div>
    </div>
  )
  console.log(ele);
  return ele;
}

react通过babel把JSX转成createElement函数，生成ReactElement对象，然后通过ReactDOM.render函数把ReactElement渲染成真是的DOM元素