虚拟DOM可以看做一棵模拟了DOM树的JavaScript对象树。在传统的 Web 应用中，我们往往会把数据的变化实时地更新到用户界面中，于是每次数据的微小变动都会引起 DOM 树的重新渲染。虚拟DOM的目的是将所有操作累加起来，统计计算出所有的变化后，统一更新一次DOM。

　　React会先将你的代码转换成一个javascript对象，然后再把这个javascript对象转换成真实的DOM。而这个javascript对象就是所谓的虚拟DOM。

　　1.基于babel-preset-react-app把JSX变成React.createElement(...)。可以理解为JSX只是React.createElement的语法糖。

<div className="box" style={{color: '#f00'}} index={0}>
    123
    <p>456</p>
</div>

 　　经过babel转换成下面的样子：

React.createElement("div", {
        className: "box",
        style: {
            color: '#f00'
        },
        index: 0
    }, "123", React.createElement("p", null, "456")
);

　　2.执行React.createElement(...)会返回一个javascript对象，这个对象就是所谓的虚拟DOM。

　　createElement会返回一个虚拟对象 let VitrualDomObj = React.createElement(...)

3.把这个虚拟DOM通过render函数转换成真实的DOM

myrender( VitrualDomObj , document.getElementById('root'));

上一篇

vue的$set是什么？

下一篇

从零开始学Java之Set集合都有哪些特性