simple; } } let p = new VNode(); p.nodeName = nodeName; p.children = children; p.attributes = attributes==null ? undefined : attributes; p.key = attributes==null ? undefined : attributes.key; // if a "vnode hook" is defined, pass every created VNode to it if (options.vnode!==undefined) options.vnode(p); return p; } - Virtual DOM in a nutshell - github.com/developit/preact/blob/master/src/h.js
simple; } } let p = new VNode(); p.nodeName = nodeName; p.children = children; p.attributes = attributes==null ? undefined : attributes; p.key = attributes==null ? undefined : attributes.key; // if a "vnode hook" is defined, pass every created VNode to it if (options.vnode!==undefined) options.vnode(p); return p; } - Virtual DOM in a nutshell - github.com/developit/preact/blob/master/src/h.js
// Strings just convert to #text Nodes: if (vnode.split) return document.createTextNode(vnode); // create a DOM element with the nodeName of our VDOM element: let n = document.createElement(vnode.nodeName); // copy attributes onto the new node: let a = vnode.attributes || {}; Object.keys(a).forEach( k => n.setAttribute(k, a[k]) ); // render (build) and then append child nodes: (vnode.children || []).forEach( c => n.appendChild(render(c)) ); return n; }
it is extremely lightweight. Small objects referring to other small objects, a structure composed by easily optimizable application logic. This also means it is not tied to any rendering logic or slow DOM methods. “
lightweight. Small objects referring to other small objects, a structure composed by easily optimizable application logic. This also means it is not tied to any rendering logic or slow DOM methods. “ WTF is JSX
stefanjudis
isaoshimizu
takaking22
kazamori
kaminashi
cybozuinsideout
fuwasegu
track3jyo
line_developers
ryomaru0825
tinoue
yoshiiryo1
lizrice
morganepeng
jennybc
keathley
cromwellryan
philhawksworth
colly
addyosmani
revolveconf
andyhume
paigeccino
jlugia
![children = [child]; } else { children.push(child); } lastSimple =](https://files.speakerdeck.com/presentations/c4f63c0af4f341a88b8a98a3777ef198/slide_29.jpg){kind=link}
![children = [child]; } else { children.push(child); } lastSimple =](https://files.speakerdeck.com/presentations/c4f63c0af4f341a88b8a98a3777ef198/slide_30.jpg){kind=link}
