react学习记录 ---- (一) 07.虚拟DOM的本质和目的

案例内容：

   一个常规的数据表格   其中一条属性叫做时间

   点击时间头的排序   表格中的数据会依照 升序/降序的顺序来排列  如下

假设  第一行是 20  第二行是 21

那么排序的目标效果就是使这两行调换位置   然后重新渲染页面

如果使用上述方法进行页面渲染的话，在页面数据发生更改需要重新渲染时  势必需要把所有的数据都重新进行渲染

 

然而上述数据实际只有   一二行发生变化   其余行不变

那么  如果有一种方法能够使其他行元素不变   

只对变化行进行渲染的话  势必会提高页面的效率

 

下面就来看一下   如何实现按需渲染

 获取内存中的新旧两颗DOM树   进行对比   得到需要按需更新的DOM元素

那么  如何获取这两颗DOM树呢？

浏览器中，并没有直接提供 获取DOM树的API  因此无法直接拿到浏览器内存中的DOM树

 那么  就需要我们手动模拟新旧两颗DOM树了

模拟思路如下：

即用JS对象 来模拟DOM树形的结构 （DOM嵌套关系） 

而这模拟新旧两颗DOM进行按需渲染 

就是React中 虚拟DOM 的概念