作为React的核心概念之一,virtu转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。al dom从某种意义上改变了前端的现有【未经授权禁止转载】【本文首发于唐霜的博客】体系。大部分人把virtual dom当【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。做一种性能提升策略,因为它可以有效的减少【原创内容,转载请注明出处】【原创不易,请尊重版权】直接操作DOM带来的消耗,从而提升脚本的未经授权,禁止复制转载。【原创内容,转载请注明出处】执行效率。但是实际上,virtual d本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。om并不完全是避免DOM操作的消耗,有的【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】情况下,直接操作DOM可能来的更快,而v本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。irtual dom的真正意义,在于把直【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】接的DOM操作和js编程,提炼成一个抽象【转载请注明来源】【转载请注明来源】层,virtual dom是对js操作D【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】OM的抽象,对于今后的前端编程而言,de转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】veloper无需再直接操作DOM,而是本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net通过virtual dom去操作,这是它本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。真正的意义。
本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshua【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。ng.net本文是一篇对Virtual DOM原理和【未经授权禁止转载】【原创内容,转载请注明出处】理念进行阐述的文章,因此希望做到脱离Re【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】act,仅谈Virtual DOM.
著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】ang.net著作权归作者所有,禁止商业用途转载。Virtual DOM的知识内容
Virtual DOM这个知识点的内容包【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】括:
转载请注明出处:www.tangshua【未经授权禁止转载】【作者:唐霜】ng.net【转载请注明来源】- 将DOM树抽象成一个js对象 原创内容,盗版必究。本文作者:唐霜,转载请注明出处。
- 将抽象的Virtual DOM转换为真正【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。的DOM 原创内容,盗版必究。转载请注明出处:www.tangshua原创内容,盗版必究。【本文首发于唐霜的博客】ng.net
- Virtual DOM发生变化时,自动更新真正的DOM。包含两个内容:
- 通过一个diff算法,来比较新旧Virt原创内容,盗版必究。转载请注明出处:www.tangshuang.netual DOM之间的差异,并记录下来 转载请注明出处:www.tangshua未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。ng.net【版权所有】唐霜 www.tangshu【作者:唐霜】【原创不易,请尊重版权】ang.net【访问 www.tangshuang.n【本文受版权保护】【原创内容,转载请注明出处】et 获取更多精彩内容】本文作者:唐霜,转载请注明出处。
- 将记录下来的差异,通过一个patch算法【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】操作真实的DOM 未经授权,禁止复制转载。【关注微信公众号:wwwtangshua【作者:唐霜】转载请注明出处:www.tangshuang.netngnet】【未经授权禁止转载】
【访问 www.tangshuang.n【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】ang.net未经授权,禁止复制转载。【原创不易,请尊重版权】
接下来,我们就会对这些内容一一进行详解。
【转载请注明来源】原创内容,盗版必究。【作者:唐霜】【未经授权禁止转载】Virtual DOM的创建
将DOM树抽象成一个js对象,这个对象就【未经授权禁止转载】原创内容,盗版必究。是Virtual DOM。应该生成怎样的【本文首发于唐霜的博客】【作者:唐霜】对象,这个对象有怎样的数据结构,生成的时【本文受版权保护】【转载请注明来源】候使用怎样的高效算法?
【本文首发于唐霜的博客】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】ang.netVirtual DOM的数据结构
和DOM一样,Virtual DOM也是【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】由一个一个的节点组成,节点之间有父子关系【关注微信公众号:wwwtangshuangnet】【版权所有,侵权必究】,一个节点和它的子节点的引用,我们把组成原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net的一个单元称为VNode(Virtual【未经授权禁止转载】【未经授权禁止转载】 DOM Node),一个VNode应该【本文受版权保护】著作权归作者所有,禁止商业用途转载。包含哪些信息呢?
【本文受版权保护】【本文首发于唐霜的博客】{
id: 1, // 标记这个VNode的唯一id,整个VTree可以完全用这些id图示出来,在diff中也有作用
name: 'div', // 标签名,甚至可以是自定义标签
props: { // 标签的属性
'id': 'my-tag',
'data-role': 'test',
'class': 'my-class the-class',
},
children: [ // 子VNode列表
{ ...another VNode... },
...
],
text: '...', // textNode, 如果标签直接包含文本内容的话,使用text,而非children
events: { // 绑定的事件
input: [ function(e) { ... } ],
},
}
上面的VNode仅是一个参考,而非标准,【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。各框架(库)实现与此不同。但大体上,一个著作权归作者所有,禁止商业用途转载。【本文受版权保护】VNode对象,应该包含一个tag的完整未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。内容,甚至它的上下文引用。
未经授权,禁止复制转载。原创内容,盗版必究。【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.netet 获取更多精彩内容】使用JSX生成Virtual DOM
在代码层面,我们是看不到Virtual 著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】DOM的真实内容的,我们无法通过cons转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】ole.log得到这个原始的js对象,因【版权所有,侵权必究】未经授权,禁止复制转载。此也无法直接修改它。它是被封装在框架源码【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。内部的一套格式,我们只管使用库提供的一些本文作者:唐霜,转载请注明出处。【作者:唐霜】方法来生成它,而不用关心它是怎样的一种存【原创不易,请尊重版权】原创内容,盗版必究。在。当然,如果你要自己实现一套自己的Vi未经授权,禁止复制转载。【作者:唐霜】rtual DOM,也可以自己定义这些内【版权所有,侵权必究】转载请注明出处:www.tangshuang.net容。
【转载请注明来源】本文作者:唐霜,转载请注明出处。既然我们只能利用一些方法来生成Virtu本文作者:唐霜,转载请注明出处。原创内容,盗版必究。al DOM,那么就要找最简单的,那就是原创内容,盗版必究。【本文受版权保护】JSX。JSX用类似HTML的语法,实现未经授权,禁止复制转载。【作者:唐霜】Virtual DOM的生成。在掌握了少【版权所有,侵权必究】【转载请注明来源】数与HTML不同的地方之后,使用JSX就【本文受版权保护】【本文首发于唐霜的博客】像写HTML一样方便且直观易于理解。
未经授权,禁止复制转载。【访问 www.tangshuang.n【原创不易,请尊重版权】原创内容,盗版必究。et 获取更多精彩内容】原创内容,盗版必究。【原创不易,请尊重版权】例如,我们可以这样:
原创内容,盗版必究。【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】未经授权,禁止复制转载。ang.net【访问 www.tangshuang.n【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】var node = (
<div id="my-tag" className="my-class the-class" dataRole="test" onInput={inputFunction}>
<span>text</span>
</div>
)
render(node)
用一段类似HTML的代码就可以生成一段V【本文受版权保护】【版权所有】唐霜 www.tangshuang.netNode(包括children VNod【作者:唐霜】转载请注明出处:www.tangshuang.netes),而无需我们手工去写复杂的js对象【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。。
【原创内容,转载请注明出处】【作者:唐霜】实际上,在不同的框架体系里面,jsx的编【关注微信公众号:wwwtangshuangnet】【转载请注明来源】译结果也不同,在React里面,会被解析【转载请注明来源】【版权所有】唐霜 www.tangshuang.net为React.creatElement,而在vue里面,也会有自己的解析结果。【原创不易,请尊重版权】原创内容,盗版必究。但是JSX给了我们统一的生成Virtua未经授权,禁止复制转载。【未经授权禁止转载】l DOM的接口,让我们可以不必因为不同【原创不易,请尊重版权】【原创不易,请尊重版权】的框架而撰写不同的代码。在不同的框架中,本文作者:唐霜,转载请注明出处。【作者:唐霜】使用该框架提供的render函数去解析j【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】sx即可。
render函数会将Virtual DO【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。M渲染成真正的DOM,这我们将在下一节详原创内容,盗版必究。本文作者:唐霜,转载请注明出处。细讲到。
【关注微信公众号:wwwtangshua【版权所有,侵权必究】【转载请注明来源】ngnet】未经授权,禁止复制转载。将Virtual DOM渲染成真实的DOM
上一节提到,render函数会将Virt转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】ual DOM渲染为真实的DOM,虽然我【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】们不用关心render的实现是怎么样的,【作者:唐霜】著作权归作者所有,禁止商业用途转载。但是为了了解其原理,还是要从代码层面去假【版权所有,侵权必究】【本文首发于唐霜的博客】装实现它。
【作者:唐霜】【未经授权禁止转载】转载请注明出处:www.tangshua【本文受版权保护】【本文受版权保护】ng.net现在,我们有了Virtual DOM(一著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。个js对象),我们要利用它构建真实的DO著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。M。在js中,我们使用document.createElement来创建一个标签,所以,实际上,渲染DOM本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】只需要两步:createElement和【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。insertElement。
function createElement(VNode) {
let node = document.createElement(VNode.name)
let props = VNode.props
let keys = Object.keys(props)
keys.forEach(prop => node[prop] = props[prop]) // 这里只是做个演示,实际上还需要详细考虑
return node}function insertElement(createdNode, parentNode, replaceNode) {
replaceNode ? parentNode.replaceChild(createdNode, replaceNode) : parentNode.appendChild(createdNode)
}
大致便是上面的思路,当然,在库具体实现的【作者:唐霜】【未经授权禁止转载】时候会复杂的多,比如事件绑定,比如在se【作者:唐霜】【原创不易,请尊重版权】tInnerHTML的时候,要替换某个元【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。素怎么办?但是,思路上就是这样,通过Vi著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netrtual DOM创建一个真实的DOM元【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】素,再将它挂载到适当的文档流中,或替换掉【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。原来的某个元素。
本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。diff算法
上述insetElement方法直接替换【作者:唐霜】【原创不易,请尊重版权】DOM或将Node插入到DOM中,虽然是著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】由Virtual DOM转化而来,但是还【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net不足以体现Virtual DOM的特性。【本文受版权保护】未经授权,禁止复制转载。Virtual DOM包含的一项内容,就原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。是在上述insertElement之前,【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】要进行新老Virtual DOM的对比,【原创内容,转载请注明出处】【本文首发于唐霜的博客】找出两者之间真正的不同之处,仅对这些不同原创内容,盗版必究。原创内容,盗版必究。之处进行更新。
【本文首发于唐霜的博客】【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。现在的问题是,如何知道哪些VNode节点【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。是要被更新的呢?这就需要一个diff算法【原创内容,转载请注明出处】【原创不易,请尊重版权】来进行对比,而对比的时候,我们仅用到Vi【转载请注明来源】转载请注明出处:www.tangshuang.netrtual DOM作为对比的对象,而不涉转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。及真实DOM。Virtual DOM更新【转载请注明来源】未经授权,禁止复制转载。视图之所以快,也是因此。
【本文受版权保护】著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】传统diff算法
传统 diff 算法通过循环递归对节点进行依次对比,效率低下【作者:唐霜】著作权归作者所有,禁止商业用途转载。,算法复杂度达到 O(n3),其中 n 是树中节点的总数。我们用代【原创不易,请尊重版权】【作者:唐霜】码来演示传统diff算法:
本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。【原创不易,请尊重版权】【作者:唐霜】let result = [];// 比较叶子节点const diffLeafs = function(beforeLeaf, afterLeaf) {
// 获取较大节点树的长度
let count = Math.max(beforeLeaf.children.length, afterLeaf.children.length);
// 循环遍历
for (let i = 0; i < count; i++) {
const beforeTag = beforeLeaf.children[i];
const afterTag = afterLeaf.children[i];
// 添加 afterTag 节点
if (beforeTag === undefined) {
result.push({type: "add", element: afterTag});
// 删除 beforeTag 节点
}
else if (afterTag === undefined) {
result.push({type: "remove", element: beforeTag});
// 节点名改变时,删除 beforeTag 节点,添加 afterTag 节点
} else if (beforeTag.tagName !== afterTag.tagName) {
result.push({type: "remove", element: beforeTag});
result.push({type: "add", element: afterTag});
// 节点不变而内容改变时,改变节点
} else if (beforeTag.innerHTML !== afterTag.innerHTML) {
if (beforeTag.children.length === 0) {
result.push({
type: "changed",
beforeElement: beforeTag,
afterElement: afterTag,
html: afterTag.innerHTML
});
} else {
// 递归比较
diffLeafs(beforeTag, afterTag);
}
}
}
return result;
}
如果一棵树有1000个节点,那么如果全部原创内容,盗版必究。【版权所有,侵权必究】进行比较,将会进行10亿次比较。以现代的【本文受版权保护】【原创内容,转载请注明出处】计算机CPU算力,消耗的时间还是比较多的转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】。因此,这不能作为virtual dom【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。的diff算法来提升性能。
【版权所有】唐霜 www.tangshu【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。ang.net著作权归作者所有,禁止商业用途转载。React的diff算法
React团队在研究了传统diff算法之【转载请注明来源】著作权归作者所有,禁止商业用途转载。后,结合web的特征,认为可以通过以下策本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】略来简化传统diff算法:
本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshua转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】ngnet】- Web UI 中 DOM 节点跨层级的移本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】动操作特别少,可以忽略不计。 转载请注明出处:www.tangshua著作权归作者所有,禁止商业用途转载。【转载请注明来源】ng.net本文版权归作者所有,未经授权不得转载。
- 拥有相同类的两个组件将会生成相似的树形结【作者:唐霜】转载请注明出处:www.tangshuang.net构,拥有不同类的两个组件将会生成不同的树【原创不易,请尊重版权】【本文受版权保护】形结构。 【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。【作者:唐霜】et 获取更多精彩内容】【未经授权禁止转载】【关注微信公众号:wwwtangshua著作权归作者所有,禁止商业用途转载。【本文受版权保护】ngnet】【原创不易,请尊重版权】
- 对于同一层级的一组子节点,它们可以通过唯【作者:唐霜】本文版权归作者所有,未经授权不得转载。一 id 进行区分。 【转载请注明来源】著作权归作者所有,禁止商业用途转载。
基于上面的策略,React团队直接将传统未经授权,禁止复制转载。【版权所有,侵权必究】diff算法中一些比较干掉,比如不去比较本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。父节点不同的子节点,这样下来,复杂度直接原创内容,盗版必究。【本文受版权保护】降到了O(n)。
【版权所有,侵权必究】【关注微信公众号:wwwtangshua【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.netngnet】【本文首发于唐霜的博客】tree diff
不考虑DOM节点的跨级移动,在diff的【原创不易,请尊重版权】【本文首发于唐霜的博客】时候,只对同一级的节点进行比较。
【转载请注明来源】本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshu【本文受版权保护】【未经授权禁止转载】ang.net
仅对同级节点进行比较,当同级节点存在差异转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】时,不再进行子节点的比较
【版权所有】唐霜 www.tangshu本文作者:唐霜,转载请注明出处。【作者:唐霜】ang.net未经授权,禁止复制转载。【访问 www.tangshuang.n本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。et 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。反过来说,两个节点是否要进行比较,只需要【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】看他们是否属于相同的父节点。
【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。在比较过程中,当新的Virtual DO【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】M中某个VNode不存在于老的Virtu【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netal DOM中(同级同位置),那么这个V著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。Node就会被认为是新增的节点。而如果某未经授权,禁止复制转载。【原创内容,转载请注明出处】个VNode在老的Virtual DOM著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。中有,新的Virtual DOM中没有,【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net那么认为这个节点会被删除。
著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。因为没有考虑移动的情况,所以,当在预期发著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】生移动时,diff算法会怎么认为呢?比如【关注微信公众号:wwwtangshuangnet】【本文受版权保护】:
本文版权归作者所有,未经授权不得转载。

本文版权归作者所有,未经授权不得转载。
diff算法不会把这种情况当做移动来处转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。理,diff算法会认为,新的Virtua本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.netl DOM中,原来的A节点会被删除,在D【未经授权禁止转载】原创内容,盗版必究。节点下会新增一个节点。这个新增的节点跟原【未经授权禁止转载】【本文首发于唐霜的博客】来的A节点没有任何关系,虽然结构一样,但【原创不易,请尊重版权】【作者:唐霜】实际上它是全新的。
虽然这一做法不是很严谨,但是在实际的we【转载请注明来源】著作权归作者所有,禁止商业用途转载。b项目中这样做并没有带来非常大的性能问题【本文首发于唐霜的博客】【转载请注明来源】,相反,在处理细碎的大量变动时,反而带来【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】了性能优势。不过React官方也建议,应【未经授权禁止转载】未经授权,禁止复制转载。该保持你的组件dom结构的稳定性,不应出著作权归作者所有,禁止商业用途转载。【转载请注明来源】现这种移动节点的现象。同时,由于A节点被转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。移除时会被完全销毁,它的子节点也就跟着被【本文首发于唐霜的博客】【版权所有,侵权必究】销毁了,如果你要再次显示出来,就必须创建未经授权,禁止复制转载。未经授权,禁止复制转载。新的元素,所以,比较好的办法是使用css未经授权,禁止复制转载。【转载请注明来源】类来控制它的显示和隐藏,而不是通过数据变【原创不易,请尊重版权】原创内容,盗版必究。化因此Virtual DOM变化来更新视本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。图。
【版权所有】唐霜 www.tangshu本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】ang.net原创内容,盗版必究。原创内容,盗版必究。component diff
React以组件作为自己的产出目标,组件本文作者:唐霜,转载请注明出处。原创内容,盗版必究。与组件之间可以存在嵌套关系,所以组件本身【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】的DOM也会遵循Virtual DOM机著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。制。
【本文首发于唐霜的博客】【关注微信公众号:wwwtangshua【原创不易,请尊重版权】【未经授权禁止转载】ngnet】未经授权,禁止复制转载。- 如果是同一类型的组件,按照tree di未经授权,禁止复制转载。【原创内容,转载请注明出处】ff策略继续比较 Virtual DOM本文作者:唐霜,转载请注明出处。【未经授权禁止转载】。 【转载请注明来源】【未经授权禁止转载】【关注微信公众号:wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】ngnet】
- 如果不是,则将该组件判断为 dirty 转载请注明出处:www.tangshuang.net【本文受版权保护】component,从而替换整个组件下的未经授权,禁止复制转载。【转载请注明来源】所有子节点。 【版权所有,侵权必究】【本文受版权保护】【关注微信公众号:wwwtangshua本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。ngnet】
- 对于同一类型的组件,有可能其 Virtu【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。al DOM 没有任何变化,如果能够确切本文版权归作者所有,未经授权不得转载。【转载请注明来源】的知道这点那可以节省大量的 diff 运【本文受版权保护】原创内容,盗版必究。算时间,因此 React 允许用户通过
shouldComponentUpdate()来判断该组件是否需要进行 diff。 【转载请注明来源】【版权所有】唐霜 www.tangshu未经授权,禁止复制转载。【本文首发于唐霜的博客】ang.net【原创内容,转载请注明出处】【本文受版权保护】
虽然两个组件的DOM可能完全相似,但是这本文版权归作者所有,未经授权不得转载。【转载请注明来源】种情况就没有必要创建两个组件,React本文作者:唐霜,转载请注明出处。【作者:唐霜】官方认为不同类型的 component 原创内容,盗版必究。【转载请注明来源】是很少存在相似 DOM tree 的机会【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】,因此这种极端因素很难在实现开发过程中造本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net成重大影响的,因此他们毅然决然的采用了上【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。述component diff策略,即使【版权所有,侵权必究】【版权所有,侵权必究】可能存在一定的性能误差。
【关注微信公众号:wwwtangshua著作权归作者所有,禁止商业用途转载。【本文受版权保护】ngnet】本文作者:唐霜,转载请注明出处。【未经授权禁止转载】未经授权,禁止复制转载。element diff
当节点处于同一层级时,React dif本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.netf 提供了三种节点操作,分别为:INSE转载请注明出处:www.tangshuang.net【本文受版权保护】RT_MARKUP(插入)、MOVE_E本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】XISTING(移动)和 REMOVE_原创内容,盗版必究。【版权所有,侵权必究】NODE(删除)。
【版权所有】唐霜 www.tangshu【作者:唐霜】转载请注明出处:www.tangshuang.netang.net转载请注明出处:www.tangshua【本文受版权保护】【原创不易,请尊重版权】ng.net【本文受版权保护】未经授权,禁止复制转载。和tree diff不同,当对比同一组元本文作者:唐霜,转载请注明出处。【转载请注明来源】素时,比如老的Virtual DOM中有【作者:唐霜】【未经授权禁止转载】一组p标签,和新的Virtual DOM【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】中的这组p标签是同一个父节点,那么就要考著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】虑这组p标签的实际情况,而不是一味的删掉【转载请注明来源】【版权所有,侵权必究】再插入进来。比如新的Virtual DO本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。M中,多了一个p标签,那么它可能是插入进本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。来的;或者其中一个移动了;或者其中某个删本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】除了。这个时候,在上面的Virtual 本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.netDOM数据结构中的id就发挥作用了,在R【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】eact中使用key作为这个标志。当一组p原本的id序列是1著作权归作者所有,禁止商业用途转载。【作者:唐霜】,2,3,4,5时,现在变成了4,2,1【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。,5,3,那么可以通过重新排列它们就可以【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net了。而如果现在变成了1,3,4,5,6,【原创不易,请尊重版权】【本文受版权保护】那么可以知道,2被删除了,6被插入进来。

所以,给每一个VNode一个唯一标识只非【本文受版权保护】未经授权,禁止复制转载。常重要,如果不存在这个标识,那么当遇到上本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】述情况的时候,diff算法无法知道当前新著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】的Virtual DOM中的元素和老的V【原创内容,转载请注明出处】【转载请注明来源】irtual DOM中的元素是不是一样的【版权所有,侵权必究】转载请注明出处:www.tangshuang.net,他们虽然name值可能一样,但是可能存本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。在上下文的差别,比如绑定的事件不同,所以【本文受版权保护】本文作者:唐霜,转载请注明出处。diff算法在无法获取这个唯一标识的情况【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。下,只要发现不同,就会把对应那个位置的元【转载请注明来源】原创内容,盗版必究。素及其之后的所有元素都销毁,把新的Vir【原创内容,转载请注明出处】【转载请注明来源】tual DOM中对应的元素加进来,这样【版权所有】唐霜 www.tangshuang.net【本文受版权保护】性能上就差了一大截。
未经授权,禁止复制转载。【版权所有】唐霜 www.tangshu【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。ang.net【未经授权禁止转载】差异的记录
diff算法的目标,是找出Virtual【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。 DOM在前后的差异,并把这些差异保存起未经授权,禁止复制转载。【版权所有,侵权必究】来。但是有一个问题,保存在哪里?老的Vi转载请注明出处:www.tangshuang.net原创内容,盗版必究。rtual DOM保存在哪里?差异的记录未经授权,禁止复制转载。【原创不易,请尊重版权】保存在哪里?
【转载请注明来源】本文作者:唐霜,转载请注明出处。【转载请注明来源】【原创不易,请尊重版权】React是以组件为单位的,因此,这个组【关注微信公众号:wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】件的Virtual DOM被保存在组件的本文作者:唐霜,转载请注明出处。【本文受版权保护】特定属性里。当组件的数据发生变化的时候,【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】会产生一份新的Virtual DOM,这本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。份新的Virtual DOM会被用来和保【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。存起来的老的Virtual DOM进行对【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。比,当后续操作(patch)完成之后,新【作者:唐霜】【转载请注明来源】的Virtual DOM会被保存到该属性未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net上把老的给覆盖。
【版权所有】唐霜 www.tangshu本文作者:唐霜,转载请注明出处。【作者:唐霜】ang.net【访问 www.tangshuang.n【本文首发于唐霜的博客】【本文受版权保护】et 获取更多精彩内容】未经授权,禁止复制转载。【原创内容,转载请注明出处】diff算法没发现一个差异,就会把该差异原创内容,盗版必究。【原创内容,转载请注明出处】记录到一个特定的变量中,保存差异的变量是著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】一个数组,该数组的每个元素是一个对象,记【关注微信公众号:wwwtangshuangnet】【本文受版权保护】录着差异的类型、结果、需要进行的操作。
原创内容,盗版必究。【未经授权禁止转载】【原创不易,请尊重版权】【作者:唐霜】function enqueueInsertMarkup(parentInst, markup, toIndex) {
updateQueue.push({
parentInst: parentInst,
parentNode: null,
type: ReactMultiChildUpdateTypes.INSERT_MARKUP,
markupIndex: markupQueue.push(markup) - 1,
content: null,
fromIndex: null,
toIndex: toIndex,
});
}
function enqueueMove(parentInst, fromIndex, toIndex) {
updateQueue.push({
parentInst: parentInst,
parentNode: null,
type: ReactMultiChildUpdateTypes.MOVE_EXISTING,
markupIndex: null,
content: null,
fromIndex: fromIndex,
toIndex: toIndex,
});
}
function enqueueRemove(parentInst, fromIndex) {
updateQueue.push({
parentInst: parentInst,
parentNode: null,
type: ReactMultiChildUpdateTypes.REMOVE_NODE,
markupIndex: null,
content: null,
fromIndex: fromIndex,
toIndex: null,
});
}
上面的updateQueue就是这个变量本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshuangnet】,它里面记录着每一个差异,其中有一个ty未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。pe属性,用来表示这个差异后续应该执行怎本文作者:唐霜,转载请注明出处。原创内容,盗版必究。样的操作。
未经授权,禁止复制转载。【关注微信公众号:wwwtangshua著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】ngnet】【作者:唐霜】patch算法
当知道了哪些地方是有差异的,需要更新真实【本文首发于唐霜的博客】【原创内容,转载请注明出处】的DOM之后,我们就可以对真实DOM进行本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】操作了。虽然我们可以像第二部分中一样,用著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】一个render函数去重新渲染,但是通过著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net这里的patch算法进行操作,效率会高很【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】多。
本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。function patch (node, patches) {
var walker = {index: 0}
dfsWalk(node, walker, patches)
}
function dfsWalk (node, walker, patches) {
var currentPatches = patches[walker.index] // 从patches拿出当前节点的差异
var len = node.childNodes ? node.childNodes.length : 0
for (var i = 0; i < len; i++) { // 深度遍历子节点
var child = node.childNodes[i]
walker.index++
dfsWalk(child, walker, patches)
}
if (currentPatches) {
applyPatches(node, currentPatches) // 对当前节点进行DOM操作
}
}
function applyPatches(node, currentPatches) {
currentPatches.forEach(function (currentPatch) {
switch (currentPatch.type) {
case REPLACE:
node.parentNode.replaceChild(currentPatch.node.render(), node)
break
case REORDER:
reorderChildren(node, currentPatch.moves)
break
case PROPS:
setProps(node, currentPatch.props)
break
case TEXT:
node.textContent = currentPatch.content
break
default:
throw new Error('Unknown patch type ' + currentPatch.type)
}
})
}
这里红色的currentPatches就著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。是我们前面的updateQueue。其中【作者:唐霜】【关注微信公众号:wwwtangshuangnet】,reorder和setProps都有具本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。体的实现方法,无非都是通过JavaScr转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.netipt原生的dom操作方法进行操作。
【未经授权禁止转载】转载请注明出处:www.tangshua原创内容,盗版必究。【本文受版权保护】ng.net未经授权,禁止复制转载。数据响应
Virtual DOM确实让DOM操作变本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】得抽象很多,但是还需要和数据结合起来。数【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net据的变化会带来视图的变化。
本文作者:唐霜,转载请注明出处。原创内容,盗版必究。【关注微信公众号:wwwtangshua【本文首发于唐霜的博客】【作者:唐霜】ngnet】【版权所有】唐霜 www.tangshu【版权所有,侵权必究】【作者:唐霜】ang.net
当model上的数据发生变化时,自动触发【关注微信公众号:wwwtangshuangnet】【版权所有,侵权必究】virtual dom的diff算法和p【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】atch操作
【本文首发于唐霜的博客】转载请注明出处:www.tangshua本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】ng.net对数据的监听是model层面的逻辑,当监本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】听到数据有所变化之后,需要重新调用ren原创内容,盗版必究。本文作者:唐霜,转载请注明出处。der方法,调用时就会触发diff算法,著作权归作者所有,禁止商业用途转载。【转载请注明来源】进而进行patch操作:
【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】ang.net【关注微信公众号:wwwtangshua【未经授权禁止转载】【作者:唐霜】ngnet】import {Component} from 'react'
class App extends Component {
constructor(props) {
super(props)
this.state = {
value: '',
}
}
handleChange(e) {
let {value} = e.target
this.setState({ value })
}
render() {
return (
<div>
<input value={value} onChage={this.handleChange} />
<span>{value}</span>
</div>
)
}
}
在React中,执行上面红色的setSt【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。ate的时候,React内部会自己去调用原创内容,盗版必究。【本文受版权保护】render函数,得到Virtual D未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】OM,完成Virtual DOM的dif【本文首发于唐霜的博客】【作者:唐霜】f和patch。当你自己实现了setSt转载请注明出处:www.tangshuang.net原创内容,盗版必究。ate方法之后,你也就基本实现React【原创不易,请尊重版权】【本文受版权保护】核心的功能。
【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.netang.net本文作者:唐霜,转载请注明出处。【本文受版权保护】小结
在文章开头,我提到Virtual DOM【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】的意义在于抽象。这是因为在性能上,其实它【未经授权禁止转载】未经授权,禁止复制转载。并没有占太大的便宜,只能说还过的去,从上【原创不易,请尊重版权】【原创不易,请尊重版权】面的分析中你就可以知道,非得用Virtu本文作者:唐霜,转载请注明出处。原创内容,盗版必究。al DOM来更新视图的话,有些原本用一【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net个innerText就搞定的操作,却要在【原创内容,转载请注明出处】【本文首发于唐霜的博客】代码内部溜一大圈儿。但是,正是由于这种统未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】一的封装,让你不用再去编写一整套的根据数【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。据渲染DOM,监听数据更新DOM的操作。【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】这让Virtual DOM在原始的js编【作者:唐霜】【本文首发于唐霜的博客】程基础上更进了一步。将Virtual D原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。OM应用到React Native,js【关注微信公众号:wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】程序就不用再关心底层是浏览器提供的DOM【未经授权禁止转载】原创内容,盗版必究。,还是手机提供的UI接口,在通过js去更本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。新视图这个代码层面,就得到了统一。这才是转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】Virtual DOM最大的意义。
【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。【本文受版权保护】ang.net转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。ng.net2017-08-24 9891 React, Virtual DOM



您写的传统diff算法的代码演示,就是分层比较吧。
我看网上的搜索,传统的思路应该是对新的树每个节点遍历查找旧的树n^2,然后找到最小编辑距离n,合起来是n^3。但是这一块我在网上没找到代码。
是有问题
[…] 在我写完《Virtual DOM原理浅易详解》之后,我打算把Virtual DOM的体系拆解开。其中非常重要的一点,是我打算做一个HTML的解析器,在通过fetch抓取到某个网页之后,可以通过这个解析器,快速得到自己想要的数据。而这一部分,是Virtual DOM整个知识体系的一部分,即“DOM树抽象成一个js对象”这个部分。于是,我希望通过本文,详细阐述我是怎么创建自己的这个抽象js对象。 […]