A thunk optimization for virtual-dom
For an introduction on Thunk interface in general, see virtual-dom doc.
Use Thunk when you want to avoid re-rendering subtrees.
Thunk
will only re-evaluate the subtree if the arguments
you pass to it change. This means you should use an immutable
data structure (like observ-struct
)
var Thunk = require("vdom-thunk")
function render(state) {
return h('div', [
Thunk(header, state.head),
main(),
Thunk(footer, state.foot)
])
}
function header(head) { ... }
function main() { ... }
function footer(foot) { ... }
The above example demonstrates how we can only evaluate the
header()
function when state.head
changes.
The Thunk
will internally cache the previous state.head
and
not re-evaluate the expensive header()
function unless the
state.head
state has changed.
See docs.mli for the jsig type definition
var thunk = Thunk(fn, ...args)
vdom-thunk : (fn: Function<VElem>, ...args: Any) => VThunk
Thunk
takes a fn
function that returns a virtual node,
probably created by virtual-hyperscript
.
The rest of the arguments passed to Thunk
will be passed to
the fn
you pass.
Thunk
returns a virtual thunk that can be used in vtree/diff
and in vdom/create-element
from vtree
and
vdom
To make placing a "key"
on a Thunk
easier, you can set a
"key"
or "id"
property on the second argument to Thunk
.
This allows you to give a list of keyed Thunk
's to vtree
which will increase performance by using the key algorithm
in the virtual dom diff to move DOM nodes around instead of
mutating them.
var Thunk = partial(eqFunc)
vdom-thunk/partial : (
eq: (Array<Any>, Array<Any>) => Boolean
) => (fn: Function<VElem>, ...args: Any) => VThunk
partial
takes a comparison function and returns a Thunk
function as defined above.
You can use partial
to create your own Thunk
function with
a custom comparison function.
Your comparison function should take two arrays of arguments and
return true
if the arrays are the same.
The default implementation of this comparison function is shallow comparison of the arrays and checking that the values at each index are the exact same reference to an object.
var thunk = new ImmutableThunk(fn, args, key, eqFn)
vdom-thunk/immutable-thunk : (
fn: (...args: Any) => VElem,
args: Array<Any>,
key: String | null,
eqFn: (Array<Any>, Array<Any>) => Boolean
) => VThunk
vdom-thunk
will use ImmutableThunk
under the hood. The
ImmutableThunk
interface is a lower level interface that
you can use directly if you want slightly more performance
or customizability.
It takes a function that will be evaluated to a virtual element
for vtree
and a set of args that it will call the function
with.
It also takes a key which it sets on the returned VThunk
and
the comparison function used to do arguments comparison.
npm install vdom-thunk