virtual-dom diff ersetzen/entfernen, anstatt nur zu entfernen

Question

Verwenden Sie die Methoden virtual-domh und diff.

Gegeben: [a,b] und [b]

Der resultierende diff Patch ersetzt a mit b entfernt dann b, anstatt einfach nur a entfernen.

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) 

Ergebnisse in:

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

Was "align" die img Elemente getan werden muss, um so nicht entfernt und wieder hinzugefügt in?

Answer 1

Hinzufügen der virtual-dom Eigenschaft key als ein Element Attribut löst genau dies.

key

Wenn Sie h mit h nennen ('div', {key: somekey}) er eine Taste auf dem return VNode gesetzt wird. Dieser Schlüssel ist keine normale DOM-Eigenschaft, sondern ein virtueller Dom-Optimierungshinweis.

Es teilt virtual-dom im Grunde, DOM-Knoten statt umzuordnen.

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) 

Ergebnisse in:

1 REMOVE DIV 

(. Kredit für den solution-Chris Vickery geht)