React:DOM树与虚拟DOM树(概念与区别)

React:DOM树与虚拟DOM树(概念与区别)

DOM的本质: 浏览器中的概念，用JS对象来表示页面上的元素，并提供了操作DOM对象的API；React中的虚拟DOM: 是框架中的概念，是程序员 用JS对象来模拟页面上的DOM和DOM嵌套；虚拟DOM的目的: 为了实现页面中，DOM元素的高效更新DOM和虚拟DOM的区别： DOM: 浏览器中提供的概念，用JS对象表示页面上的元素，并提供了操作元素的API; 虚拟DOM: 是框架中的概念;是开发框架的程序员,手动用JS对象来模拟DOM元素和嵌套关系;

DOM树的概念： 一个网页呈现的过程： 1.浏览器请求服务器获取页面HTML代码 2.浏览器要先在内存中,解析DOM结构,并在浏览器内存中,渲染出一棵DOM树; 3.浏览器把DOM树,呈现到页面上;

虚拟DOM: 需求:单击列头，实现对应表格数据的排序 1.表格中的数据从哪儿来：从数据库查询回来的 2.这些查询到的数据，存放到哪儿了： 这些数据在浏览器的内存中存放着，而且是以对象数组的形式来表示的； 3.这些数据，是怎么渲染到页面上的？ 方案1:手动for循环整个数组，然后手动拼接字符串 str+=’’ 方案2:使用模板引擎,art-template 4.思考：上述的方案，有没有性能上的问题？ 5.如果用户点击了[时间],想按照时间从大到小排序： (1)触发 点击事件，在事件中，把内存中的对象数组重新排序 (2)当排序完之后，页面时旧的;但内存中的对象数组是新的 (3)想办法，把最新的数组，重新渲染到页面上(有无性能问题) 6.分析与总结：上述方法，只是实现了把数据渲染到页面上的能力；但是并没有吧性能做到最优。 7.性能最优:按需渲染页面(只重新渲染更新的数据所对应的页面元素) 8.按需更新的实现：获取内存中的新旧两棵DOM树,进行对比，得到需要被按需更新的DOM元素; 9.获取新旧DOM树并对比: 分析:浏览器中，并没有直接提供获取DOM树的API;因此，我们无法拿到浏览器内存中的DOM树; 10.程序员可以手动模拟一个 新旧两棵DOM树 11.程序员手动模拟DOM树 目标DOM树:

<div id="mydiv" title="标题" data-index="0"> 泥猴哇 <p>哈哈哈</p> </div>

通过对象手动模拟DOM树:

var div = { tagName:'div', attrs:{ id:'mydiv', title:'标题', 'data-index':'0', }, childrens:[ '泥猴哇', { tagName:'p', attrs:{}, chilrens:[ "哈哈哈" ] } ] }

12.程序员手动模拟的这两棵新旧DOM树，就是React中虚拟DOM的概念; 总结： 虚拟DOM，就是用JS对象的形式，来模拟页面上DOM嵌套关系;(虚拟DOM是以JS对象的形式存在的)

本质：用JS对象，来模拟DOM元素和嵌套关系; 目的：实现页面元素的高效更新;