render(element, vnodes)
优质
小牛编辑
138浏览
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、自定义元素、所有标准的属性和事件。当然，它也支持组件和生命周期方法。