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

需要做些什么来对齐＆＃34;对齐＆＃34; img元素，因此不会将其删除并重新添加回来？

Answer 1

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

  

key

     

如果你用h呼叫h（＆＃39; div＆＃39;，{key：someKey}），它会设置一个键   返回VNode。这个键不是普通的DOM属性，而是一个   virtual-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

（Chris Vickery的积分转为solution。）