1

virtual-dom hとdiffメソッドの使用。

与えられた:[a,b]そして[b]

結果のdiffパッチは、単純に を削除するのではなく、aその後b削除します。ba

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要素が削除されたり追加されたりしないように、要素を「整列」させるために何をする必要がありますか?

4

1 に答える 1

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に送られます。)

于 2016-05-19T20:02:07.083 に答える