mount(root, component)
优质
小牛编辑
134浏览
2023-12-01
描述
激活组件的自动重绘。
var state = {
count: 0,
inc: function() {state.count++}
}
var Counter = {
view: function() {
return m("div", {onclick: state.inc}, state.count)
}
}
m.mount(document.body, Counter)
签名
m.mount(element, component)
参数 | 类型 | 是否必需 | 描述 |
---|---|---|---|
element | Element | 是 | 一个 DOM 元素,组件会被渲染到该元素内 |
component | Component|null | 是 | 要渲染的组件。若为 null ,则会移除 DOM 数,并清空内部状态。 |
返回 | 没有返回 |
工作原理
和 m.render() 类似,m.mount()
可以把一个组件挂载到指定元素中。如果之前已经通过 m.mount()
方法挂载了组件,则会把该组件和之前的 vnode 进行比较,修改发生数据变更的 DOM,不会涉及到没有数据变更的 DOM 节点。
替换一个组件
如果先前已经把组件挂载到了 element
,再调用 m.mount(element, OtherComponent)
,则会用 OtherComponent
组件替换掉先前的组件。
卸载组件
使用 m.mount(element, null)
可以卸载 element
中的组件,并清空 Mithril 的内部状态。这可以防止手动移除 root
节点时导致内存泄露。
和 m.render
的区别
通过 m.mount
渲染的组件会根据视图中的事件进行自动重绘,例如调用 m.redraw()
或 m.request()
。而通过 m.render()
渲染的则不会。
把 Mithril 的部件通过 m.mount
整合到使用第三方路由库的代码中,仍然可以使用 Mithril 的自动重绘系统。
m.render
适用于需要手动控制渲染的情况(例如,和第三方路由整合,或使用 Redux 等第三方数据层时)。