react 虚拟DOM的原理

1、虚拟DOM，就是虚拟节点，通过用一个JS对象表示真实DOM树结构，这个对象就包括标签名，属性，子节点等。然后将其渲染成真是的DOM节点。

2、第一步是模拟，用 JSX 语法写出来的元素其实是一个虚拟节点

<div id='a'>
    <span class='b'>test</span>
</div>

　　通过转译工具将JSX转换成React.createElement的结构

1 2	`React.createElement(` `"div",{id:"a"},` `React.createElement("span",{class:"b"} ,"test"))`

最后通过createElement得到一个JS对象即虚拟DOM。

{
    type: 'div',
    props: { id: 'a' },
    children: [
        {
            type: 'span',
            props:{class:'b'}
            children: 'test'
        }, 
    ]
}

3、将虚拟DOM转换成真实DOM：调用ReactDOM.render(element, container[, callback])将组件进行渲染(初始参数处理)-->批处理、事务调用-->生成html-->渲染html

总结：React组件的渲染流程

使用React.createElement或JSX编写React组件，实际上所有的JSX代码最后都会转换成React.createElement(...)，Babel帮助我们完成了这个转换的过程。
createElement函数对key和ref等特殊的props进行处理，并获取defaultProps对默认props进行赋值，并且对传入的孩子节点进行处理，最终构造成一个ReactElement对象（所谓的虚拟DOM）。
ReactDOM.render将生成好的虚拟DOM渲染到指定容器上，其中采用了批处理、事务等机制并且对特定浏览器进行了性能优化，最终转换为真实DOM。