OWL教程2 OWL五大组成部分之一虚拟DOM

OWL五大组成部分之一虚拟DOM

说明: 虚拟dom太偏向底层,日常开发中也用不到,所以涉及的内容也不多,但是呢,为了文档结构的完整性,我还是作为一章来完成.

参考文档:https://github.com/odoo/owl/blob/master/doc/miscellaneous/architecture.md

粗略的讲,Owl有五个主要部分:

1. 虚拟DOM系统(src/blockdom)
2. 组件系统(src/component)
3. 模板编译器(src/compiler 目录)
4. 一个小的运行时让各层组合在一起(src/app)
5. 响应式系统(src/reactivity.ts)

虚拟dom

虚拟dom是一种基于块的优化虚拟dom，支持多块(针对fragments)。owl渲染的所有内容都在内部由虚拟节点表示。虚拟dom的任务是有效地表示应用程序的当前状态，并在需要时构建实际的dom表示，或者在需要时更新dom。

渲染分为两个阶段:

• 虚拟渲染: 在内存中生成虚拟dom,异步的
• patch(补丁): 将虚拟dom刷新到屏幕(同步的)

渲染涉及几个类:

• Component
• scheduler
• fibers: 一个包含元数据的小的对象, 关联到被渲染的组件

组件通过动态的组件树来组织, 在用户界面中可见,当组件C的的渲染启动时:

• C创建一个fiber类,包含了props信息.
• C的虚拟渲染阶段开始(异步的渲染所有的子组件)
• fiber添加到调度器中, 如果fiber被完成,调度器在每个动画帧中持续的轮询
• 一旦渲染完成, 调度器将调用任务回调函数, 它会用来刷新dom(如果在此期间没有取消)

2 VDOM

Owl是一个声明式的组件系统, 我们声明了组件树的结构, Owl将它转换成一组命令式的操作.这个转换是通过虚拟dom完成的,这是owl的底层实现,大多数开发者不需要直接调用虚拟dom的方法.

虚拟dom背后的主要思想是保持dom的内存结构(称之为虚拟节点), 当发生一些变化时,重新生成一个新的内存结构,然后比较二者之间的差异,然后应用这些变化.

vdom 暴露了两个函数:

h : 创建一个新的虚拟节点

patch: 比较两个虚拟节点,然后应用两者之间的不同

注意: Owl’s的虚拟dom是 snabbdom(一个开源的虚拟dom js库)的分支.