1

Virtual-dom

 2 years ago
source link: https://devhints.io/virtual-dom
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
This is Devhints.io cheatsheets — a collection of cheatsheets I've written.

See https://www.npmjs.com/package/virtual-dom

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')

Rendering

tree = h('div', { style: { color: 'blue' } }, [ 'hello' ])
el = createElement(tree)
document.body.appendChild(root)

Updating

tree2 = h('div', { style: { color: 'blue' } }, [ 'hello world' ])
delta = diff(tree, tree2)
el = patch(el, delta) // patch() modifies el

Devhints.io cheatsheets is a collection of cheatsheets I've written over the years. Suggestions and corrections? Send them in.

I'm Rico Sta. Cruz. Check out my Today I learned blog for more.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK