作为React的核心概念之一，virtu【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。al dom从某种意义上改变了前端的现有【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net体系。大部分人把virtual dom当本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】做一种性能提升策略，因为它可以有效的减少转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net直接操作DOM带来的消耗，从而提升脚本的转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。执行效率。但是实际上，virtual d本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netom并不完全是避免DOM操作的消耗，有的原创内容，盗版必究。【原创不易，请尊重版权】情况下，直接操作DOM可能来的更快，而v著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。irtual dom的真正意义，在于把直著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。接的DOM操作和js编程，提炼成一个抽象本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。层，virtual dom是对js操作D本文作者：唐霜，转载请注明出处。【作者：唐霜】OM的抽象，对于今后的前端编程而言，de著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】veloper无需再直接操作DOM，而是未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。通过virtual dom去操作，这是它【原创内容，转载请注明出处】【本文受版权保护】真正的意义。
原创内容，盗版必究。【作者：唐霜】未经授权，禁止复制转载。【转载请注明来源】本文是一篇对Virtual DOM原理和转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】理念进行阐述的文章，因此希望做到脱离Re【关注微信公众号：wwwtangshuangnet】【作者：唐霜】act，仅谈Virtual DOM.
未经授权，禁止复制转载。【未经授权禁止转载】【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net原创内容，盗版必究。Virtual DOM的知识内容【原创内容，转载请注明出处】
【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【作者：唐霜】Virtual DOM这个知识点的内容包【原创不易，请尊重版权】【原创不易，请尊重版权】括：
【原创内容，转载请注明出处】【原创不易，请尊重版权】【未经授权禁止转载】- 将DOM树抽象成一个js对象【本文受版权保护】 【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。
- 将抽象的Virtual DOM转换为真正原创内容，盗版必究。【原创内容，转载请注明出处】的DOM 【转载请注明来源】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。
- Virtual DOM发生变化时，【转载请注明来源】自动【版权所有，侵权必究】更新真正的DOM。包含两个内容：
【版权所有，侵权必究】
- 通过一个diff算法，来比较新旧Virt【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。ual DOM之间的差异，并记录下来 原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。
- 将记录下来的差异，通过一个patch算法【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】操作真实的DOM 【本文受版权保护】转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【作者：唐霜】【本文受版权保护】
【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net【作者：唐霜】
接下来，我们就会对这些内容一一进行详解。
【本文受版权保护】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【转载请注明来源】Virtual DOM的创建【关注微信公众号：wwwtangshuangnet】
【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【本文受版权保护】将DOM树抽象成一个js对象，这个对象就本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。是Virtual DOM。应该生成怎样的未经授权，禁止复制转载。【本文首发于唐霜的博客】对象，这个对象有怎样的数据结构，生成的时转载请注明出处：www.tangshuang.net【本文受版权保护】候使用怎样的高效算法？
【转载请注明来源】【转载请注明来源】【本文首发于唐霜的博客】Virtual DOM的数据结构【本文首发于唐霜的博客】
未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。和DOM一样，Virtual DOM也是转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】由一个一个的节点组成，节点之间有父子关系【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。，一个节点和它的子节点的引用，我们把组成转载请注明出处：www.tangshuang.net【版权所有，侵权必究】的一个单元称为VNode（Virtual【作者：唐霜】未经授权，禁止复制转载。 DOM Node），一个VNode应该【本文受版权保护】本文版权归作者所有，未经授权不得转载。包含哪些信息呢？
转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net{
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.net 获取更多精彩内容】使用JSX生成Virtual DOM【访问 www.tangshuang.net 获取更多精彩内容】
【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。在代码层面，我们是看不到Virtual 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。DOM的真实内容的，我们无法通过cons本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】ole.log得到这个原始的js对象，因原创内容，盗版必究。【转载请注明来源】此也无法直接修改它。它是被封装在框架源码本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net内部的一套格式，我们只管使用库提供的一些【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。方法来生成它，而不用关心它是怎样的一种存原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net在。当然，如果你要自己实现一套自己的Vi转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。rtual DOM，也可以自己定义这些内著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】容。
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【作者：唐霜】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。既然我们只能利用一些方法来生成Virtu【作者：唐霜】转载请注明出处：www.tangshuang.netal DOM，那么就要找最简单的，那就是【转载请注明来源】本文版权归作者所有，未经授权不得转载。JSX。JSX用类似HTML的语法，实现【原创不易，请尊重版权】【转载请注明来源】Virtual DOM的生成。在掌握了少【转载请注明来源】转载请注明出处：www.tangshuang.net数与HTML不同的地方之后，使用JSX就【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。像写HTML一样方便且直观易于理解。
【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【未经授权禁止转载】例如，我们可以这样：【本文受版权保护】
【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。var node = (
<div id="my-tag" className="my-class the-class" dataRole="test" onInput={inputFunction}>
<span>text</span>
</div>
)
render(node)
用一段类似HTML的代码就可以生成一段V著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。Node（包括children VNod【作者：唐霜】【关注微信公众号：wwwtangshuangnet】es），而无需我们手工去写复杂的js对象本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】。
【转载请注明来源】本文版权归作者所有，未经授权不得转载。【转载请注明来源】【未经授权禁止转载】实际上，在不同的框架体系里面，jsx的编【原创不易，请尊重版权】【未经授权禁止转载】译结果也不同，在React里面，会被解析【原创不易，请尊重版权】【版权所有，侵权必究】为React.creatElement，而在vue里面，也会有自己的解析结果。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。但是JSX给了我们统一的生成Virtua本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。l DOM的接口，让我们可以不必因为不同本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。的框架而撰写不同的代码。在不同的框架中，本文作者：唐霜，转载请注明出处。【未经授权禁止转载】使用该框架提供的render函数去解析j【原创不易，请尊重版权】未经授权，禁止复制转载。sx即可。
render函数会将Virtual DO本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】M渲染成真正的DOM，这我们将在下一节详【未经授权禁止转载】【本文首发于唐霜的博客】细讲到。
【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】将Virtual DOM渲染成真实的DO【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。M
转载请注明出处：www.tangshuang.net【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】上一节提到，render函数会将Virt【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】ual DOM渲染为真实的DOM，虽然我【原创不易，请尊重版权】原创内容，盗版必究。们不用关心render的实现是怎么样的，【作者：唐霜】原创内容，盗版必究。但是为了了解其原理，还是要从代码层面去假原创内容，盗版必究。转载请注明出处：www.tangshuang.net装实现它。
【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【未经授权禁止转载】现在，我们有了Virtual DOM（一【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】个js对象），我们要利用它构建真实的DO【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。M。在js中，我们使用document.createElement来创建一个标签，所以，实际上，渲染DOM【未经授权禁止转载】【作者：唐霜】只需要两步：createElement和【作者：唐霜】本文作者：唐霜，转载请注明出处。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【本文首发于唐霜的博客】原创内容，盗版必究。rtual DOM创建一个真实的DOM元【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】素，再将它挂载到适当的文档流中，或替换掉本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。原来的某个元素。
未经授权，禁止复制转载。【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】diff算法【转载请注明来源】
本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。上述insetElement方法直接替换【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netDOM或将Node插入到DOM中，虽然是未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。由Virtual DOM转化而来，但是还【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。不足以体现Virtual DOM的特性。【本文受版权保护】【原创内容，转载请注明出处】Virtual DOM包含的一项内容，就【版权所有，侵权必究】【原创不易，请尊重版权】是在上述insertElement之前，本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net要进行新老Virtual DOM的对比，本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。找出两者之间真正的不同之处，仅对这些不同【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】之处进行更新。
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。现在的问题是，如何知道哪些VNode节点【原创不易，请尊重版权】【原创不易，请尊重版权】是要被更新的呢？这就需要一个diff算法【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】来进行对比，而对比的时候，我们仅用到Vi【版权所有】唐霜 www.tangshuang.net【作者：唐霜】rtual DOM作为对比的对象，而不涉【转载请注明来源】【本文首发于唐霜的博客】及真实DOM。Virtual DOM更新著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】视图之所以快，也是因此。
未经授权，禁止复制转载。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】传统diff算法【版权所有】唐霜 www.tangshuang.net
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【转载请注明来源】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net传统 diff 算法【本文首发于唐霜的博客】通过循环递归对节点进行依次对比，效率低下【转载请注明来源】【关注微信公众号：wwwtangshuangnet】，算法复杂度达到 O(n3【未经授权禁止转载】)，其中 n 是树中节点的总数。我们用代【本文受版权保护】【转载请注明来源】码来演示传统diff算法：
转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【转载请注明来源】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个节点，那么如果全部【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】进行比较，将会进行10亿次比较。以现代的【本文受版权保护】转载请注明出处：www.tangshuang.net计算机CPU算力，消耗的时间还是比较多的【关注微信公众号：wwwtangshuangnet】【作者：唐霜】。因此，这不能作为virtual dom【未经授权禁止转载】【原创内容，转载请注明出处】的diff算法来提升性能。
【原创内容，转载请注明出处】【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【转载请注明来源】【作者：唐霜】React的diff算法原创内容，盗版必究。
未经授权，禁止复制转载。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。React团队在研究了传统diff算法之【原创不易，请尊重版权】【版权所有，侵权必究】后，结合web的特征，认为可以通过以下策原创内容，盗版必究。未经授权，禁止复制转载。略来简化传统diff算法：
【版权所有】唐霜 www.tangshuang.net【作者：唐霜】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。- Web UI 中 DOM 节点跨层级的移本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。动操作特别少，可以忽略不计。 【版权所有，侵权必究】【转载请注明来源】本文版权归作者所有，未经授权不得转载。【本文受版权保护】本文版权归作者所有，未经授权不得转载。
- 拥有相同类的两个组件将会生成相似的树形结转载请注明出处：www.tangshuang.net【本文受版权保护】构，拥有不同类的两个组件将会生成不同的树【转载请注明来源】【本文首发于唐霜的博客】形结构。 【版权所有，侵权必究】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。
- 对于同一层级的一组子节点，它们可以通过唯本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】一 id 进行区分。 转载请注明出处：www.tangshuang.net【本文受版权保护】未经授权，禁止复制转载。【原创内容，转载请注明出处】
基于上面的策略，React团队直接将传统【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】diff算法中一些比较干掉，比如不去比较原创内容，盗版必究。【转载请注明来源】父节点不同的子节点，这样下来，复杂度直接本文版权归作者所有，未经授权不得转载。【本文受版权保护】降到了O(n)。
【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】tree diff本文版权归作者所有，未经授权不得转载。
原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。转载请注明出处：www.tangshuang.net不考虑DOM节点的跨级移动，在diff的【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。时候，只对同一级的节点进行比较。
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net
仅对同级节点进行比较，当同级节点存在差异著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。时，不再进行子节点的比较
原创内容，盗版必究。【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】反过来说，两个节点是否要进行比较，只需要【原创内容，转载请注明出处】【原创不易，请尊重版权】看他们是否属于相同的父节点。
【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【转载请注明来源】本文作者：唐霜，转载请注明出处。在比较过程中，当新的Virtual DO【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。M中某个VNode不存在于老的Virtu【原创内容，转载请注明出处】【作者：唐霜】al DOM中（同级同位置），那么这个V【版权所有】唐霜 www.tangshuang.net【本文受版权保护】Node就会被认为是新增的节点。而如果某【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】个VNode在老的Virtual DOM【未经授权禁止转载】【原创不易，请尊重版权】中有，新的Virtual DOM中没有，【版权所有，侵权必究】未经授权，禁止复制转载。那么认为这个节点会被删除。
【版权所有，侵权必究】原创内容，盗版必究。【未经授权禁止转载】因为没有考虑移动的情况，所以，当在预期发【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net生移动时，diff算法会怎么认为呢？比如转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】：
【转载请注明来源】【版权所有】唐霜 www.tangshuang.net
原创内容，盗版必究。原创内容，盗版必究。
diff算法不会把这种情况当做移动来处【本文首发于唐霜的博客】原创内容，盗版必究。理，diff算法会认为，新的Virtua本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】l DOM中，原来的A节点会被删除，在D本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。节点下会新增一个节点。这个新增的节点跟原【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net来的A节点没有任何关系，虽然结构一样，但【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】实际上它是全新的。
虽然这一做法不是很严谨，但是在实际的we著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。b项目中这样做并没有带来非常大的性能问题【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net，相反，在处理细碎的大量变动时，反而带来【未经授权禁止转载】转载请注明出处：www.tangshuang.net了性能优势。不过React官方也建议，应未经授权，禁止复制转载。原创内容，盗版必究。该保持你的组件dom结构的稳定性，不应出原创内容，盗版必究。【未经授权禁止转载】现这种移动节点的现象。同时，由于A节点被本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】移除时会被完全销毁，它的子节点也就跟着被原创内容，盗版必究。【原创内容，转载请注明出处】销毁了，如果你要再次显示出来，就必须创建【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。新的元素，所以，比较好的办法是使用css【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。类来控制它的显示和隐藏，而不是通过数据变著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net化因此Virtual DOM变化来更新视【本文首发于唐霜的博客】【未经授权禁止转载】图。
【本文受版权保护】【原创内容，转载请注明出处】原创内容，盗版必究。【未经授权禁止转载】【本文首发于唐霜的博客】component diff本文作者：唐霜，转载请注明出处。
【作者：唐霜】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netReact以组件作为自己的产出目标，组件【本文首发于唐霜的博客】【原创内容，转载请注明出处】与组件之间可以存在嵌套关系，所以组件本身【原创不易，请尊重版权】【未经授权禁止转载】的DOM也会遵循Virtual DOM机转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】制。
【本文首发于唐霜的博客】未经授权，禁止复制转载。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】- 如果是同一类型的组件，按照tree di【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ff策略继续比较 Virtual DOM【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】。 【作者：唐霜】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【本文受版权保护】原创内容，盗版必究。
- 如果不是，则将该组件判断为 dirty 【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】component，从而替换整个组件下的未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】所有子节点。 【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。
- 对于同一类型的组件，有可能其 Virtu转载请注明出处：www.tangshuang.net【版权所有，侵权必究】al DOM 没有任何变化，如果能够确切本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。的知道这点那可以节省大量的 diff 运【作者：唐霜】【未经授权禁止转载】算时间，因此 React 允许用户通过
shouldComponentUpdate()来判断该组件是否需要进行 diff。【作者：唐霜】 本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net
虽然两个组件的DOM可能完全相似，但是这转载请注明出处：www.tangshuang.net原创内容，盗版必究。种情况就没有必要创建两个组件，React【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】官方认为不同类型的 component 未经授权，禁止复制转载。【本文首发于唐霜的博客】是很少存在相似 DOM tree 的机会著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】，因此这种极端因素很难在实现开发过程中造本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。成重大影响的，因此他们毅然决然的采用了上转载请注明出处：www.tangshuang.net【版权所有，侵权必究】述component diff策略，即使【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。可能存在一定的性能误差。
【版权所有，侵权必究】未经授权，禁止复制转载。【原创不易，请尊重版权】【本文首发于唐霜的博客】element diff转载请注明出处：www.tangshuang.net
【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。当节点处于同一层级时，React dif本文作者：唐霜，转载请注明出处。【转载请注明来源】f 提供了三种节点操作，分别为：INSE【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。RT_MARKUP（插入）、MOVE_E【本文受版权保护】【版权所有，侵权必究】XISTING（移动）和 REMOVE_本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。NODE（删除）。
原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。和tree diff不同，当对比同一组元本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】素时，比如老的Virtual DOM中有【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。一组p标签，和新的Virtual DOM【版权所有，侵权必究】【本文首发于唐霜的博客】中的这组p标签是同一个父节点，那么就要考【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】虑这组p标签的实际情况，而不是一味的删掉【未经授权禁止转载】转载请注明出处：www.tangshuang.net再插入进来。比如新的Virtual DO【关注微信公众号：wwwtangshuangnet】【本文受版权保护】M中，多了一个p标签，那么它可能是插入进本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。来的；或者其中一个移动了；或者其中某个删著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。除了。这个时候，在上面的Virtual 转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】DOM数据结构中的id就发挥作用了，在R本文作者：唐霜，转载请注明出处。原创内容，盗版必究。eact中使用key作为这个标志。当一组p原本的id序列是1未经授权，禁止复制转载。【本文首发于唐霜的博客】,2,3,4,5时，现在变成了4,2,1【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net,5,3，那么可以通过重新排列它们就可以【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net了。而如果现在变成了1,3,4,5,6，转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】那么可以知道，2被删除了，6被插入进来。
所以，给每一个VNode一个唯一标识只非未经授权，禁止复制转载。【转载请注明来源】常重要，如果不存在这个标识，那么当遇到上本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net述情况的时候，diff算法无法知道当前新【作者：唐霜】【版权所有】唐霜 www.tangshuang.net的Virtual DOM中的元素和老的V本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netirtual DOM中的元素是不是一样的本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，他们虽然name值可能一样，但是可能存未经授权，禁止复制转载。【原创不易，请尊重版权】在上下文的差别，比如绑定的事件不同，所以【未经授权禁止转载】转载请注明出处：www.tangshuang.netdiff算法在无法获取这个唯一标识的情况【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】下，只要发现不同，就会把对应那个位置的元本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net素及其之后的所有元素都销毁，把新的Vir未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】tual DOM中对应的元素加进来，这样【作者：唐霜】原创内容，盗版必究。性能上就差了一大截。
转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【本文受版权保护】【作者：唐霜】差异的记录本文作者：唐霜，转载请注明出处。
著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】diff算法的目标，是找出Virtual【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net DOM在前后的差异，并把这些差异保存起【转载请注明来源】转载请注明出处：www.tangshuang.net来。但是有一个问题，保存在哪里？老的Vi【版权所有，侵权必究】转载请注明出处：www.tangshuang.netrtual DOM保存在哪里？差异的记录本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。保存在哪里？
【未经授权禁止转载】原创内容，盗版必究。【本文受版权保护】转载请注明出处：www.tangshuang.netReact是以组件为单位的，因此，这个组【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net件的Virtual DOM被保存在组件的【作者：唐霜】【作者：唐霜】特定属性里。当组件的数据发生变化的时候，【原创内容，转载请注明出处】【本文首发于唐霜的博客】会产生一份新的Virtual DOM，这【本文受版权保护】【版权所有，侵权必究】份新的Virtual DOM会被用来和保【未经授权禁止转载】【版权所有，侵权必究】存起来的老的Virtual DOM进行对著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net比，当后续操作（patch）完成之后，新【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。的Virtual DOM会被保存到该属性【本文首发于唐霜的博客】原创内容，盗版必究。上把老的给覆盖。
【作者：唐霜】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netdiff算法没发现一个差异，就会把该差异未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。记录到一个特定的变量中，保存差异的变量是著作权归作者所有，禁止商业用途转载。【作者：唐霜】一个数组，该数组的每个元素是一个对象，记【转载请注明来源】【版权所有，侵权必究】录着差异的类型、结果、需要进行的操作。
原创内容，盗版必究。【版权所有，侵权必究】【关注微信公众号：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就是这个变量著作权归作者所有，禁止商业用途转载。【转载请注明来源】，它里面记录着每一个差异，其中有一个ty【未经授权禁止转载】【作者：唐霜】pe属性，用来表示这个差异后续应该执行怎转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。样的操作。
原创内容，盗版必究。未经授权，禁止复制转载。【本文首发于唐霜的博客】未经授权，禁止复制转载。【原创内容，转载请注明出处】patch算法【作者：唐霜】
【原创内容，转载请注明出处】【未经授权禁止转载】未经授权，禁止复制转载。当知道了哪些地方是有差异的，需要更新真实本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。的DOM之后，我们就可以对真实DOM进行【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。操作了。虽然我们可以像第二部分中一样，用【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】一个render函数去重新渲染，但是通过本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】这里的patch算法进行操作，效率会高很【本文受版权保护】【版权所有，侵权必究】多。
【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netfunction 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。其中【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】，reorder和setProps都有具【本文受版权保护】【作者：唐霜】体的实现方法，无非都是通过JavaScr【转载请注明来源】转载请注明出处：www.tangshuang.netipt原生的dom操作方法进行操作。
【未经授权禁止转载】【转载请注明来源】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】数据响应未经授权，禁止复制转载。
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。Virtual DOM确实让DOM操作变【原创不易，请尊重版权】原创内容，盗版必究。得抽象很多，但是还需要和数据结合起来。数【本文首发于唐霜的博客】【原创不易，请尊重版权】据的变化会带来视图的变化。
【转载请注明来源】【作者：唐霜】【本文受版权保护】
当model上的数据发生变化时，自动触发著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。virtual dom的diff算法和p【本文首发于唐霜的博客】【作者：唐霜】atch操作
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。对数据的监听是model层面的逻辑，当监【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。听到数据有所变化之后，需要重新调用ren【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。der方法，调用时就会触发diff算法，转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。进而进行patch操作：
【原创不易，请尊重版权】原创内容，盗版必究。【本文受版权保护】【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netimport {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【本文首发于唐霜的博客】未经授权，禁止复制转载。ate的时候，React内部会自己去调用【作者：唐霜】未经授权，禁止复制转载。render函数，得到Virtual D【作者：唐霜】本文作者：唐霜，转载请注明出处。OM，完成Virtual DOM的dif著作权归作者所有，禁止商业用途转载。【转载请注明来源】f和patch。当你自己实现了setSt【关注微信公众号：wwwtangshuangnet】【作者：唐霜】ate方法之后，你也就基本实现React【本文受版权保护】【版权所有】唐霜 www.tangshuang.net核心的功能。
【本文首发于唐霜的博客】【原创内容，转载请注明出处】原创内容，盗版必究。【版权所有，侵权必究】小结【版权所有，侵权必究】
【未经授权禁止转载】转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。在文章开头，我提到Virtual DOM著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】的意义在于抽象。这是因为在性能上，其实它【转载请注明来源】【本文受版权保护】并没有占太大的便宜，只能说还过的去，从上【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】面的分析中你就可以知道，非得用Virtu本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netal DOM来更新视图的话，有些原本用一原创内容，盗版必究。转载请注明出处：www.tangshuang.net个innerText就搞定的操作，却要在转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】代码内部溜一大圈儿。但是，正是由于这种统【未经授权禁止转载】转载请注明出处：www.tangshuang.net一的封装，让你不用再去编写一整套的根据数【原创内容，转载请注明出处】【版权所有，侵权必究】据渲染DOM，监听数据更新DOM的操作。【本文首发于唐霜的博客】【作者：唐霜】这让Virtual DOM在原始的js编【原创内容，转载请注明出处】【版权所有，侵权必究】程基础上更进了一步。将Virtual D著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netOM应用到React Native，js转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】程序就不用再关心底层是浏览器提供的DOM著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。，还是手机提供的UI接口，在通过js去更原创内容，盗版必究。【本文首发于唐霜的博客】新视图这个代码层面，就得到了统一。这才是【本文受版权保护】【版权所有，侵权必究】Virtual DOM最大的意义。
转载请注明出处：www.tangshuang.net【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【未经授权禁止转载】2017-08-24 9738 React, Virtual DOM
您写的传统diff算法的代码演示，就是分层比较吧。
我看网上的搜索，传统的思路应该是对新的树每个节点遍历查找旧的树n^2，然后找到最小编辑距离n，合起来是n^3。但是这一块我在网上没找到代码。
是有问题
[…] 在我写完《Virtual DOM原理浅易详解》之后，我打算把Virtual DOM的体系拆解开。其中非常重要的一点，是我打算做一个HTML的解析器，在通过fetch抓取到某个网页之后，可以通过这个解析器，快速得到自己想要的数据。而这一部分，是Virtual DOM整个知识体系的一部分，即“DOM树抽象成一个js对象”这个部分。于是，我希望通过本文，详细阐述我是怎么创建自己的这个抽象js对象。 […]