1、React把 JSX 语法，渲染成真实DOM经历了什么
虚拟DOM （JSX）=> 真实DOM（渲染在页面）
第一步：基于babel-preset-react-app 把 JSX 语法解析成：
React.createElement("div", null, "Hello World!!!");
JSX (<div>Hello World!!!</div>)
To
React.createElement("div", null, "Hello World!!!");
// React.createElement中的参数解析：
/**
* 1、标签名(或者函数组件、类组件名),一定存在；
*
* 2、给标签元素设置的属性(可能会为null),但是一定会存在；
*
* 3、第三项或者更多项：都是标签的子节点(可能是文本节点或者元素节点)；
* 但是所有的元素节点都会变成 React.createElement() 这种形式；
*/
/**
* 第二个以后的项可能会存在几种情况：
* （1）不存在更多项：如果父节点中没有任何子元素；
* （2）为字符串：父节点中的子项中有文本；
* （3）为新的React.createElement() 方法：子项中有元素节点；
*/
(1)
<div></div>
=>
React.createElement("div", null);
(2)
<div>Hello World!!!</div>
=>
React.createElement("div", null, "Hello World!!!");
(3)
<div>Hello World!!!<a></a></div>
=>
React.createElement(
"div",
null,
"Hello World!!!",
React.createElement("a", null)
);
第二步：执行 React.createElement()方法，创建JSX虚拟DOM对象:
let virtualDOM = React.createElement();
// React.createElement()返回的才是真正意义上的虚拟DOM
console.log(virtualDOM);
React.createElement()函数执行后返回一个对象，其中有几个重要属性：
/**
*（1）type：标签名或者组件名；
*（2）props：props有几种情况，在下面分解开；
*/
props的情况：
/**
*（1）style、className等我们传递的属性；
*（2）children：children是子项；
* 第一种情况：没有children这个属性：说明不包含子节点；
* 第二种情况：children是一个字符串，说明子项是文本节点；
* 第三种情况：children是一个数组，子项包含元素节点；
*/
React.createElement()方法返回的对象
第三步：React.render()函数把虚拟DOM对象变为真实的DOM对象：
