main-loop

2019-08-24

A rendering loop for diffable UIs

main-loop

A rendering loop for diffable UIs

main-loopis an optimization module for a virtual DOM system. Normally you would re-create the virtual tree every time your state changes. This is not optimum, with main-loop you will only update your virtual tree at most once per request animation frame.

main-loopbasically gives you batching of your virtual DOM changes, which means if you change your model multiple times it will be rendered once asynchronously on the next request animation frame.

Example

var mainLoop = require("main-loop")
var h = require("virtual-dom/h")

var initState = { fruits: ["apple", "banana"], name: "Steve" }

function render(state) {
    return h("div", [
        h("div", [
            h("span", "hello "),
            h("span.name", state.name)
        ]),
        h("ul", state.fruits.map(renderFruit))
    ])

    function renderFruit(fruitName) {
        return h("li", [
            h("span", fruitName)
        ])
    }
}

// set up a loop
var loop = mainLoop(initState, render, {
    create: require("virtual-dom/create-element"),
    diff: require("virtual-dom/diff"),
    patch: require("virtual-dom/patch")
})
document.body.appendChild(loop.target)

// update the loop with the new application state
loop.update({
    fruits: ["apple", "banana", "cherry"],
    name: "Steve"
})
loop.update({
    fruits: ["apple", "banana", "cherry"],
    name: "Stevie"
})

var loop = mainLoop(initState, render, opts)

Create a loop object with some initial state, a render function, and some options. Your function render (state) {}receives the current state as its argument and must return a virtual-dom object.

You must supply: opts.diff, opts.patch, and opts.create. These can be obtained directly from require("virtual-dom").

Optionally supply an opts.targetand opts.initialTree.

loop.target

The main-loop root DOM element. Insert this element to the page.

loop.update(newState)

Update the page state, automatically re-rendering the page as necessary.

loop.state

Read the current main-loop state. To modify the loop state, use loop.update().

Installation

npm install main-loop

Contributors

  • Raynos

MIT Licenced

HomePage

https://github.com/Raynos/main-loop

Repository

https://github.com/Raynos/main-loop


上一篇:gantt-chart
下一篇:level-browserify
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部