render(element, vnodes)
优质
小牛编辑
132浏览
2023-12-01
描述
把模版渲染到 DOM 中:
m.render(document.body, "hello")
// <body>hello</body>
签名
m.render(element, vnodes)
参数 | 类型 | 是否必需 | 描述 |
---|---|---|---|
element | Element | 是 | 一个 DOM 元素,vnode 会被渲染到该元素内。 |
vnodes | Array|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、自定义元素、所有标准的属性和事件。当然,它也支持组件和生命周期方法。