add note about synchronicity

This commit is contained in:
Leo Horie 2016-11-15 10:16:01 -05:00
parent f780e0f7b9
commit 9a3551c575

View file

@ -1,7 +1,8 @@
# render(element, vnodes) # render(element, vnodes)
- [API](#api) - [API](#api)
- [How it works](#how it works) - [How it works](#how-it-works)
- [Why Virtual DOM](#why-virtual-dom)
- [Differences from other API methods](#differences-from-other-api-methods) - [Differences from other API methods](#differences-from-other-api-methods)
- [Standalone usage](#standalone-usage) - [Standalone usage](#standalone-usage)
@ -23,7 +24,13 @@ Argument | Type | Required | Description
### How it works ### How it works
The `m.render(element, vnodes)` method takes a virtual DOM tree (typically generated via the [`m()` hyperscript function](hyperscript.md), generates a DOM tree and mounts it on `element`. If `element` already has a DOM tree mounted via a previous `m.render()` call, `vnodes` is diffed against the previous `vnodes` tree and the existing DOM tree is modified only where needed to reflect the changes. Unchanged DOM nodes are not touched at all. The `m.render(element, vnodes)` method takes a virtual DOM tree (typically generated via the [`m()` hyperscript function](hyperscript.md), generates a DOM tree and mounts it on `element`. If `element` already has a DOM tree mounted via a previous `m.render()` call, `vnodes` is diffed against the previous `vnodes` tree and the existing DOM tree is modified only where needed to reflect the changes. Unchanged DOM nodes are not touched at all.
`m.render` is synchronous.
---
### Why Virtual DOM
It may seem wasteful to generate a vnode tree on every redraw, but as it turns out, creating and comparing Javascript data structures is surprisingly cheap compared to reading and modifying the DOM. It may seem wasteful to generate a vnode tree on every redraw, but as it turns out, creating and comparing Javascript data structures is surprisingly cheap compared to reading and modifying the DOM.