当前位置: 首页 > 文档资料 > Mithril 官方文档 >

render(element, vnodes)

优质
小牛编辑
134浏览
2023-12-01

描述

把模版渲染到 DOM 中:

m.render(document.body, "hello")
// <body>hello</body>

签名

m.render(element, vnodes)
参数类型是否必需描述
elementElement一个 DOM 元素,vnode 会被渲染到该元素内。
vnodesArray|Vnode需要渲染的 vnode
返回返回 undefined

工作原理

m.render(element, vnodes) 方法使用虚拟 DOM 树(通常通过 m() 函数生成)来生成 DOM 树,并添加到 element 元素中。如果之前已经通过调用 m.render() 把 DOM 树添加到了 element 元素中,则再次调用 m.render() 时,会把 vnode 和之前的 vnode 进行比较,并更改发生数据变更的地方,没有数据变更的 DOM 节点不会被更改。

m.render 是同步的。

和其他 API 方法的区别

m.render() 在 Mithril 内部会被 m.mount()m.route()m.redraw()m.request() 方法调用。在流更新后不会被调用。

m.mount()m.route() 不同,通过 m.render() 渲染的 vnode 不会进行自动重绘,它是一种手动控制渲染的方法。

另一个不同是 m.render 需要一个 vnode(或 vnode 组成的数组)作为第二个参数,而 m.mount()m.route() 第二个参数是组件。

独立使用

var render = require("mithril/render")

m.render 模块和 Knockout、React 和 Vue 这类视图库类似。它大概有 500 行代码(3kb min+gzip),并实现了搜索空间压缩算法和 DOM 回收机制的虚拟 DOM diff 引擎。无论是初始化页面还是重新渲染,它都拥有顶级的性能。它不依赖 Mithril 的其他模块,可以作为一个独立的库使用。

尽管该模块非常小,但却是功能齐全的。它支持:SVG、自定义元素、所有标准的属性和事件。当然,它也支持组件生命周期方法