React学习之旅二：虚拟DOM的概念和本质以及Diff算法

虚拟DOM (Virtual Document Object Model)

• DOM的本质是什么：浏览器中的概念，用JS对象表示页面上的元素并提供操作DOM对象的API；
• 什么是React中的虚拟DOM：框架中的概念，是程序员用JS对象模拟页面上的DOM和DOM嵌套；
• 为什么要实现虚拟 DOM（虚拟DOM的目的）：为了实现页面中DOM元素的高效更新；

 

• DOM元素和虚拟DOM的区别：

​​​​​​​    1.DOM:浏览器中的概念，用JS对象表示页面上的元素并提供操作DOM对象的API；

    2.虚拟DOM:框架中的概念，是程序员用JS对象模拟页面上的DOM元素和DOM嵌套关系；

          ①本质：用JS对象模拟DOM元素和嵌套的关系；

          ②目的：为了实现页面元素的高效更新；

---

• 下面通过一个需求来说明React是如何实现页面的高效更新的：

虚拟DOM的原理

 

 

 

 

 

 

 

 

 

 

 

 

 

---

• 用JS模拟DOM树

---

Diff算法

• tree diff：新旧DOM树逐层对比的过程就是tree diff；当DOM树逐层对比完成后，即可找到所有需要被更新的元素；
• component diff：在进行tree diff的时候，每一层中组件级别的对比叫做component diff；

1.对比前后，组件的类型相同，则暂时认为该组件不需要被更新；

2.对比前后，组件的类型不同，则将旧的组件移除并创建新的组件，同时将组件追加到页面；

• element diff：在进行组件对比时，如果两个组件类型相同，则需要进行元素级别的对比，即element diff；

总结：虚拟DOM提供了创建DOM树的方法，Diff算法提供了新旧DOM树对比的最优算法，以达到按需更新的目的。

 

理解了DOM、虚拟DOM的概念以及diff算法是如何实现按需更新的，接下来将进行具体的语法学习阶段~~