Virtual DOM 系列三：Diff算法
DOM操作是昂贵的，为了减少DOM操作，才有了Virtual DOM。而Virtual DOM的关键就是通过对比新旧vnode，找出差异部分来更新节点。对比的关键算法就是Diff算法。
历史由来：
diff算法历史悠久，并不是虚拟dom提出来的。早在linux系统中，就有diff命令，用于比较两个文本的差异，还有一个最常用的就是git diff命令，由于比较两个版本之间的差异。Virtual DOM的算法是用来对比新旧虚拟dom的差异。
核心逻辑：
1. creatElement
首先先来分析patch函数的第一种用法：patch(container, vnode).。如何把虚拟dom转化成真正的DOM?
假设每个节点都包含tag,props,children三个属性（按最简单的情况考虑）
step 1: 创建节点；
step 2: 设置属性；
step 3; 遍历子节点，子节点也需要结果step1,2,然后加到当前节点中。
经过分析，我们发现创键DOM,需要用到递归。
代码模拟如下：
function createElement(vnode) {
var tag = vnode.tag;//获取元素的标签
var props = vnode.props || {};//获取元素的属性
var children = vnode.children || [];//获取子节点
if (!tag) {
return null;
}
var ele = document.createElement(tag);//step1:创建元素
// step2:设置属性
var attrName;
for (attrName in props) {
if (props.hasOwnProperty(attrName)) {
ele.setAttribute(attrName, props[attrName])
}
}
//step3:深度遍历子元素,并插入当前节点
children.forEach(element => {
ele.appendChild(createElement(element)); //递归调用
});
return ele;
}
2. updateChild
接着再来分析一下patch函数的第二种用法：patch(oldVnode, newVnode)。如何找出新旧节点的差异，并更新节点？
假设只考虑最简单的情况，只改变以下<li>标签的值。
function updateChild(vnode,newVnode) {
var oldchild = vnode.children || [];
var newchild = newVnode.children || [];
oldchild.forEach(function (childItem, index) {
var newChildItem = newchild[index]; //假设层级相同
if(newChildItem.tag === childItem.tag) {
updateChild(childItem, newChildItem) //如果相同则递归遍历
} else {
replaceNode(childItem, newChildItem)//否则替换dom
}
})
}
function replaceNode(parantNode, oldchildNode, newChildNode) {
var oldelem = oldchildNode.elem; //获取真实dom
var newElem = newChildNode.elem;
//替换dom
parantNode.replaceChild(newElem,oldelem);
}
注：以上代码都是伪代码，只考虑了最简单的情况。
总结：
实际diff算法非常复杂，还需考虑节点的新增，删除；节点的重新排序；节点属性、样式、事件的绑定等。
1. virtual dom是什么？为何使用VD?
虚拟DOM
用JS模拟DOM结构
DOM操作非常昂贵
将DOM对比放在JS层，提高效率
2. 核心API
h('<html 标签名>'，{属性}，[children])//含有子节点的
h('<html 标签名>'，{属性}，'text'])//没有子节点，只有文本，如<p>this is VN</p>
patch(container, vnode)//初次渲染
patch(oldVnode, newVnode); //re-render
3. diff算法
creatElement，updateChild逻辑
Virtual DOM 系列三：Diff算法的更多相关文章
- Virtual DOM 系列二：核心API
为了更好的研究Virtual DOM,我选择了snabbdom来学习.相比Vue来说,snabbdom对于研究虚拟DOM更好,因为它里面没有其他干扰的东西,而且源码也比较少,因此研究起来更方便. 1. ...
- Virtual DOM 系列一：认识虚拟DOM
1. 什么是Virtual DOM? Virtual DOM(虚拟DOM)是指用JS模拟DOM结构.本质上来讲VD是一个JS对象,并且至少包含三个属性:tag(html标签),props(标签的属性, ...
- React之虚拟DOM中的Diff算法
一.React中的setState ( 异步函数,异步获取数据 ) 若操作的时间间隔短,它可以将多个setState结合成一个setState,减少虚拟DOM的比对次数,提高性能 二.同层虚拟DOM对 ...
- jvm系列(三):GC算法 垃圾收集器
原文出处:纯洁的微笑 这篇文件将给大家介绍GC都有哪几种算法,以及JVM都有那些垃圾回收器,它们的工作原理. 概述 垃圾收集 Garbage Collection 通常被称为"GC" ...
- 一篇文章教会你如何将DOM转换为virtual DOM
[一.Virtual DOM简介] Virtual DOM是虚拟节点,它通过Javascript的Object对象模拟DOM中的节点,然后通过特定的render方法将其渲染成真实的DOM节点. 浏览器 ...
- diff算法深入一下？
文章转自豆皮范儿-diff算法深入一下 一.前言 有同学问:能否详细说一下 diff 算法. 简单说:diff 算法是一种优化手段,将前后两个模块进行差异化比较,修补(更新)差异的过程叫做 patch ...
- 从 0 到 1 实现 React 系列 —— 3.生命周期和 diff 算法
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
- 深入理解react中的虚拟DOM、diff算法
文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么? ...
- react虚拟dom diff算法
react虚拟dom:依据diff算法 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快! ...
随机推荐
- 辅助模式最终考验的是想象力，先来看看怎么用！| Accessibility
一.序 Hi,大家好,我是承香墨影! Android 的辅助模式(Accessibility)功能非常的强大.基本上被获取到授权之后,可以监听手机上的任何事件,例如:屏幕点击.窗口的变化.以及模拟点击 ...
- 『集群』004 Slithice 集群分布式(多个客户端，基于中央服务器的集群服务)
Slithice 集群分布式(多个客户端,基于中央服务器的多个集群服务端) 案例Demo展示: 集群架构图 如下: 如上图,上图 展示了 这个集群 的 结构: >一个中央服务器(可以有多个),负 ...
- 102 - kube-scheduler源码分析 - cobra-寻找scheduler组件启动函数
main函数在哪里? 看到这个go文件时大家是不是有一种找到入口的欣喜,同时有一种难以言表的郁闷,为什么那么短?获取一个command,然后执行一个Execute()就运行了?好像是这么回事,然后点开 ...
- C# 10分钟完成百度人脸识别——入门篇
嗨咯,小编在此祝大家新年快乐财多多! 今天我们来盘一盘人脸注册.人脸识别等相关操作,这是一个简单入门教程. 话不多说,我们进入主题: 完成人脸识别所需的步骤: 注册百度账号api,创建自己的应用: 创 ...
- 操作MongoDB数据库知识点
一.命令行操作mongo: 1.开启数据库 mongo 如果启动mongo报以下错误: 运行brew services start mongodb 2.创建数据库并进入实例 use test 3.查看 ...
- Asp.Net Core在CentOS部署与注意
部署具体步骤参考:将ASP.NET Core应用程序部署至生产环境中(CentOS7) 1.wwwroot是放静态文件的,Startup的配置里面要app.UseStaticFiles(); 2.在不 ...
- c# 抽象类，抽象方法使用（abstract）
入行一年多,在这个IT行业,开发技术主要使用的是.NET,而对应使用的高级语言自然就是c#了.从2017年7月入职后,在平时的工作过程中,只记得使用一些方法去完成逻辑功能,而很少去深究一些语法特性,特 ...
- c#如何声明数据结构类型为null？
可以通过如下两种方式声明可为空的类型:System.Nullable<T> variable;T?variable:eg:int值是-2,147,483,648 到 2,147,483,6 ...
- PHP 二维数组排序保持键名不变
对二维数组指定的键名排序,首先大家想到的是array_multisort函数,关于array_multisort的用法我之前也写了一篇废话不多言,我们看个实例: <?php $data = ar ...
- Netty解决粘包和拆包问题的四种方案
在RPC框架中,粘包和拆包问题是必须解决一个问题,因为RPC框架中,各个微服务相互之间都是维系了一个TCP长连接,比如dubbo就是一个全双工的长连接.由于微服务往对方发送信息的时候,所有的请求都是使 ...