Comments (3)
@snowmagic1 对于列表的diff,virtual dom需要提供额外key
属性来唯一标识每一个节点,才能正确进行diff(这和Reat的key属性的作用一样)。上面的写法应该为:
var el1 = el('div', {'id': 'container'}, [el('ul'), el('li', {key: 'uid1'}, ['1'])])
var el2 = el('div', {'id': 'container'}, [el('ul'), el('li', {key: 'uid2'}, ['2']), el('li', {key: 'uid1'}, ['1'])])
var d = diff(el1, el2)
console.log(JSON.stringify(d))
结果:
{
"0":[
{
"type":1,
"moves":[
{
"index":1,
"item":{
"tagName":"li",
"props":{
"key":"uid2"
},
"children":[
"2"
],
"key":"uid2",
"count":1
},
"type":1
}
]
}
]
}
抱歉没有在文档中写清楚,后续加上。
from simple-virtual-dom.
ok, 我现在不太明白的地方是children reorder是做什么用的, 2种情况
如果children node没有key, 我的例子里完全可以用dsf得到同样2步的结果 - modify text + insert,所以在这种情况下reorder是多余的
所以reorder只有在children node里有key的情况下有用, 我这样理解对不对
BTW - 另外突然想起来call listdiff传了个'key'参数
from simple-virtual-dom.
@snowmagic1 对的,只有在有key
的情况下才有用,没有key的话就会按顺序对子元素进行diff。有key的话会先进行排序再进行diff。
因为在实际当中可能会对列表进行数据的新增、删除、排序。例如邮箱里面的收件箱列表,可以根据时间重新排序等等。如果没有这个key
属性,在进行diff的时候,就会按顺序的进行对比,那么有可能整个列表元素的内容都会被重新构造。如果提供key
的话,会找出元素移动到了什么位置,再对内容进行diff,这样就可以尽量复用元素,避免大量的DOM操作。
可以参考:https://github.com/livoras/simple-virtual-dom/blob/master/lib/diff.js#L24-L38
from simple-virtual-dom.
Related Issues (20)
- 删除dom后更新,listener出了个问题 HOT 3
- 请问diff文件里面的require('list-diff2')文件在哪?
- patch.js文件的一行代码疑惑 HOT 2
- Support for events?
- 好像字体图标会出现问题?
- 文本解析会有问题 HOT 1
- 关于文件依赖问题 HOT 1
- 直接操作dom多了会有bug
- swiper问题
- 打开sort-table.html排序问题 HOT 1
- 请问一下事件绑定问题
- diff算法里面,没考虑oldChildren为空,newChildren不为空的情况
- from github
- 点击排序有问题
- list-diff2是个什么东东? HOT 1
- 文档补全
- 用push的方法往一个已创建的Element里插入childern,不能自动更新Element的count HOT 7
- difference between developit/preact ? HOT 1
- Improve compatibility with JSX HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from simple-virtual-dom.