三、虚拟DOM渲染机制 ------ 2020-03-21

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对象：