react 虚拟dom的优点:
数据渲染到页面的方式:
1).手动for循环整个数组;
2).使用模板引擎;
缺点:性能上的问题比较严重 列如:列表的排序等,需要重新渲染页面的某个需求,重新渲染页面的性能。
如何提高性能?
按需渲染:只更新数据变化的那一条数据(DOM树)。
原理:获取内存中的新旧两颗DOM树,进行对比,把数据发生变化的进行按需更新
如何获取新旧两颗DOM树?实现对比?
因为浏览器中并没有直接提供获取DOM树的api;因此我没无法拿到浏览器内存中的DOM树;所以只能手动模拟DOM树;
怎么模拟DOM树?
利用js:其实也是面向对象思想。比如我们要模拟
'<div class="testDiv" name="我是DIV">我是div<h1>嵌套H1</h1><div>'
/*模拟部分*/
var div = {
tagName:'div',
attrs:{
class:'testDIv',
name:'我是DIV'
},
childrens:[
"我是DIV",
{
tagName:'h1',
attrs:{},
childrens:[
'嵌套H1'
]
}
]
}
/*如果部分数据发生更新*/
var div = {
tagName:'div',
attrs:{
class:'testDIv',
name:'我是DIV'
},
childrens:[
/*这条数据发生变话。只需要标记这条数据即可*/
"我是DIV1231231231231231231231231",
{
tagName:'h1',
attrs:{},
childrens:[
'嵌套H1'
]
}
]
}
以上就是react的虚拟dom的原理和优点; (本质:就是利用js对象的行为来模拟页面上DOM的嵌套关系就是虚拟DOM)从而实现高效更新;
怎么实现对比呢?
Diff算法;
tree diff:新旧两颗DOM树逐层对比的过程就是Tree Diff;当整颗DOM树对比完毕,则所有需要更新的元素,必然能够找到。 (组件对比-每一层的对比(component diff)),元素对比(element diff));
react 虚拟dom
猜你喜欢
转载自blog.csdn.net/gyq04551/article/details/80999370
今日推荐
周排行