react 虚拟DOM的原理

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

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

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

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

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。

参考自链接：https://juejin.cn/post/6844903824683958286

4、虚拟DOM的优点：让DOM操作的整体性能更好，能减少不必要的DOM操作。

5、缺点：react为虚拟DOM创造了合成事件，如果混用合成事件和原生 DOM 事件，有可能会出 bug。