main-loop

2019-08-24 admin

main-loop是什么

什么是main-loop,A rendering loop for diffable UIs

main-loop使用教程帮助文档

main-loop

A rendering loop for diffable UIs

main-loop is 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-loop basically 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.target and 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

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-73375.html

文章标题:main-loop

回到顶部