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

Question

使用virtual-dom h和diff方法。

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

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

RequireBin 示例。

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作为元素属性正好解决了这个问题。

钥匙

如果你用 h('div', { key: someKey }) 调用 h，它将在返回的 VNode 上设置一个键。该键不是普通的 DOM 属性，而是虚拟 dom 优化提示。

它基本上告诉 virtual-dom 重新排序 DOM 节点而不是改变它们。

固定示例。

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的解决方案。）