virtual-dom.md

   1 ---
   2 title: Virtual-dom
   3 category: JavaScript libraries
   4 layout: 2017/sheet
   5 ---
   6
   7 ### About
   8
   9 See <https://www.npmjs.com/package/virtual-dom>
  10
  11 ### Example
  12
  13 ```js
  14 var h = require('virtual-dom/h')
  15 var diff = require('virtual-dom/diff')
  16 var patch = require('virtual-dom/patch')
  17 var createElement = require('virtual-dom/create-element')
  18 ```
  19
  20 ### Rendering
  21
  22 ```js
  23 tree = h('div', { style: { color: 'blue' } }, [ 'hello' ])
  24 el = createElement(tree)
  25 document.body.appendChild(root)
  26 ```
  27
  28 ### Updating
  29
  30 ```js
  31 tree2 = h('div', { style: { color: 'blue' } }, [ 'hello world' ])
  32 delta = diff(tree, tree2)
  33 el = patch(el, delta) // patch() modifies el
  34 ```