React-VirtualDOM原理浅谈

何宏伟

DOM

[嵌牛导读]

上篇文章谈到React的魅力-“组件化UI”，如何将你的页面运用组件化的思想进行划分，继而能够保证

清晰的逻辑能够清晰的展示数据

React的state将数据进行了双向绑定，使得获取服务器的数据之后页面能够立即更新，无延迟，用户友好。那么，React是如何做到

数据更新的迅速反应, 数据无阻塞，无延迟地渲染到组件上

[嵌牛鼻子]

VirtualDOM | DOM | React | Diff算法

[嵌牛提问]

• VirtualDOM 和 DOM是什么关系？
• 组件如何更新，更新的是什么？

[嵌牛正文]

Tree Structure

i. VirtualDOM & DOM

• DOM
  DOM树

• DOM, (Document Objecet Model), 文档对象模型
• DOM定义了访问HTML或是XML文档的标准，是一种使程序动态的访问，更新HTML文档或XML文档等的内容，结构以及样式的平台，操作接口
• DOM定义了文档的对象和属性，以及访问它们的接口

我们所建立的HTML页面正是由大量的DOM节点组成，如图(DOM树)所示，所有的DOM节点组成一颗DOM树，节点之间存在不同的联系，也正是这些联系构建出我们需要的逻辑，需要展示的页面

• VirtualDOM

• VirtualDOM，虚拟DOM对象，是React中的DOM对象
• React使用JSX编写虚拟DOM对象，经过Babel编译之后会生成真正的DOM. 然后会将真正的DOM插入(Render)到页面
• VirtualDOM的好处是具有高可操作性，高可定义性，能够非常方便的动态生成页面内容

整个页面被看作一个Javascript对象，简单来说，对这个对象的操作就是对整个页面的操作，React将纯DOM（真正的DOM）操作隔离开，自身采用JSX编写“Javascriipt语法的HTML”，这也正是React的优势所在

ii. Diff算法

组件在更新时，新数据到达需要重新渲染到页面，若采用HTML DOM的节点更新，对于庞大的DOM树，重新渲染页面，重新构造DOM节点，这是非常大的开销

而Diff算法

• 将未更新的页面生成一份虚拟DOM对象
• 新数据到达时，先构建新的虚拟DOM对象，然后比对新DOM和旧DOM的不同之处，即发生数据改变的地方
• 然后只要更新数据改变的部分就可以达到更新整个页面的效果、

这使得我们在state改变后render整个页面而不用担心性能的问题，极大的简化了UI开发的复杂度，提高的运行效率

---

END
参考文章及链接

• React.js
• 虚拟DOM Diff算法