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

【问题标题】：virtual-dom diff Replace/Remove Rather Than Only Removevirtual-dom diff 替换/删除而不是仅删除
【发布时间】：2016-09-16 21:48:09
【问题描述】：

使用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 元素，使其不会被移除并重新添加？

【问题讨论】：

你知道有趣的是我只是在想如何使用 virtual-dom 来完成这项工作。谢谢。

标签： javascript virtual-dom

【解决方案1】：

添加virtual-dom 属性key 作为元素属性正好解决了这个问题。

key

如果你用 h('div', { key: someKey }) 调用 h，它会在返回 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

（solution 归功于 Chris Vickery。）

【讨论】：