Virtual DOMJavaScript DOM 模型

Virtual DOM 是一個(gè) JavaScript DOM 模型，支持元素創(chuàng)建，區(qū)別計(jì)算和分支操作，提供高效的渲染。

代碼示例

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)  {
    return h('div', {
        style: {
            textAlign: 'center',
            lineHeight: (100 + count) + 'px',
            border: '1px solid red',
            width: (100 + count) + 'px',
            height: (100 + count) + 'px'
        }
    }, [String(count)]);
}
// 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;
}, 1000);