virtual-dom diff替换/删除而不是仅删除

Question

使用virtual-dom h和diff方法。

给定：[a,b]和[b]

生成的diff补丁将a替换为b，然后删除b，而不是简单地删除a。

RequireBin example.

vdom1 = h('div', [
  h('div', 'div stuff'),
  h('img', {src: 'keepme.png'})
])

vdom2 = h('div', [
  h('img', {src: 'keepme.png'})
])

diff(vdom1, vdom2)

结果如下：

1 VNODE DIV ... IMG (replace DIV with IMG)
3 REMOVE IMG

需要做什么来“对齐”img元素，这样它才不会被移除并重新添加进来？

Answer 1

添加virtual-dom属性key作为元素属性就可以解决这个问题。

key

如果您使用h(‘VNode’，{ key: someKey })调用h，它将在返回的div上设置一个键。这个键不是一个普通的DOM属性，而是一个虚拟随机优化提示。

它主要是告诉virtual-dom对DOM节点进行重新排序，而不是改变它们。

Fixed example.

vdom1 = h('div', [
  h('div', 'div stuff'),
  h('img', {src: 'keepme.png', key: 1})
])

vdom2 = h('div', [
  h('img', {src: 'keepme.png', key: 1})
])

diff(vdom1, vdom2)

结果如下：

1 REMOVE DIV

(solution的功劳归功于Chris Vickery。)