React虚拟DOM

React框架的核心优势之一， 就是支持创建虚拟DOM来提高页面性能。那么，什么是虚拟DOM呢？其实， 虚拟DOM这个概念很早就被提出来了， 是相对于实际DOM而言的。

设计人员在设计传统HTML网页的UI时， 都会在页面中定义若干的DOM元素， 这些DOM元素是所谓的实际DOM。通常， 页面中的实际DOM负责承载着外观表现和数据变化，任何外观形式的改变或数据信息的更新都要反馈到UI上， 都是需要通过操作实际DOM来实现的。

于是， 问题也就自然出现了。对于复杂的页面UI而言， 往往会定义大量的实际DOM。频繁地操作大量实际DOM， 往往会带来访问性能的严重下降， 用户体验也会随之变差， 这些都是设计人员所不希望看到的。因此， React框架专门针对这个现象引入了虚拟DOM机制，以避免频繁的DOM操作带来的性能下降问题。

React DOM类似于一种将相关的实际DOM组合在一起的集合， 是React的虚拟DOM对象，内置对象，将其理解为DOM组件应该更为贴切。因此，React框架将ReactDOM称为虚拟DOM。

示例代码：传统的（实际）DOM

    <div id="app"></div>

    <script>

        // 获取页面中的div

        let div = document.getElementById("app");

        // 创建span标签

        let span = document.createElement("span");

        // 创建h3标签

        let h3 = document.createElement("h3");

        h3.innerHTML = "橘猫吃不胖";

        // 创建p标签

        let p = document.createElement("p");

        p.innerHTML = "新年快乐";

        // 将h3和p都添加到span中

        span.appendChild(h3);

        span.appendChild(p);

        // 将span添加到div中

        div.appendChild(span);

    </script>

示例代码：虚拟DOM

    <div id="react-div"></div>

    <script type="text/babel">

        let reactDiv = document.getElementById("react-div");

        //创建虚拟的DOM元素

        //React.createElement中3个参数表示元素名字，空对象以及对象中的内容

        const reactH3 = React.createElement("h3", {}, "橘猫吃不胖");

        const reactP = React.createElement("p", {}, "新年快乐");

        const reactSpan = React.createElement("span", {}, reactH3, reactP);

        //将span渲染到div中去

        ReactDOM.render(reactSpan, reactDiv);

    </script>