渲染 — $mol

渲染

本章讲的是在你的响应式状态发生变化与屏幕上的像素更新之间发生了什么。你很少需要去想它——但理解这个模型能解释为什么 $mol 代码无需特别努力就能保持快速。

没有虚拟 DOM

$mol 不对虚拟树做 diff。每个视图属性都通过你在

状态中已经见过的那些响应式单元，直接绑定到它所控制的 DOM 节点或属性上。当一个单元变化时，只有读取它的那些确切绑定会重新运行——不是一整棵子树，不是一个组件函数，只是受影响的属性。这意味着没有需要优化的协调过程，没有需要为列表 diff 手动调整的键，也没有需要求助的 memo/shouldComponentUpdate。依赖图已经知道那组最小的更新。

组件是惰性的

只有当有东西请求视图时，它才会被构建。你从不导航到的屏幕永远不会被构建；你从不打开的标签页毫无开销。由于构建是按需且带缓存的，组合庞大的组件树代价很低——不需要的部分根本还不存在。

渲染是虚拟化的

$mol 只渲染视口之内的东西。滚动出视野的组件不会作为隐藏的 DOM 保留下来——它们根本不会被创建，只有当它们滚动进范围时才被构建。这是框架的架构特性，而不是一个可选功能或某个特殊的列表组件：任何布局都是虚拟化的，所以显示十个条目的列表和一万个条目的列表代价大致相同。实际的效果是，你编写普通的组件树和长列表，而无需求助于窗口化库。

可复现的数字

性能主张只有在你能复现时才有用。$mol 不在这里引用数字，而是参与社区的 js-framework-benchmark；你可以阅读它的结果并自己重新运行整套测试：

js-framework-benchmark 结果把它当作比较的真相来源——经过测量、带版本，并且独立于本页面。

下一步

这样就讲完了 $mol 运行方式的核心模型。接下来，在

数据获取中让它加载真实数据、开始工作。在 GitHub 上编辑此页这有帮助吗？是否上一页路由下一页测试本页内容没有虚拟 DOM 组件是惰性的渲染是虚拟化的可复现的数字下一步