virtual-dom diff Заменить/удалить, а не удалять только

Question

Использование методов virtual-domh и 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-domkey как атрибут элемента решает именно это.

key

Если вы звоните ч с ч ('DIV', {ключ: someKey}) будет установить ключ на возврата VNode. Этот ключ не является обычным свойством 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)