I have a node with a key which is re-used and re-ordered in the DOM when it is moved downwards, but not when it is moved upwards. Is there any reason for this?
Demo
Code
var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var createElement = require('virtual-dom/create-element');
// 1: Create a function that declares what the DOM should look like
function render(count) {
const x = [h('li', { key: 'foo' }, h('input')), h('li', { key: 'bar' }, h('input'))];
const children = count % 2 === 0 ? x : x.reverse();
return h('ul', children);
}
// 2: Initialise the document
var count = 0; // We need some app data. Here we just store a count.
var tree = render(count); // We need an initial tree
var rootNode = createElement(tree); // Create an initial root DOM node ...
document.body.appendChild(rootNode); // ... and it should be in the document
// 3: Wire up the update logic
setInterval(function () {
count++;
var newTree = render(count);
var patches = diff(tree, newTree);
rootNode = patch(rootNode, patches);
tree = newTree;
}, 2000);
I have a node with a key which is re-used and re-ordered in the DOM when it is moved downwards, but not when it is moved upwards. Is there any reason for this?
Demo
Code