第8章 模板编译
模板编译 所介绍的内容是如何让虚拟DOM拿到vnode
,下图给出了模板编译在整个渲染过程中的位置
模板编译的主要目标就是生成渲染函数,而渲染函数的作用是每次执行它,它就会使用当前最新的状态生成一份新的vnode
,然后使用这个vnode
进行渲染。
模板编译分三部分内容:
- 将模板解析为AST——解析器
- 遍历AST标记静态节点——优化器
- 使用AST生成渲染函数——代码生成器
解析器
解析器只实现一个功能,那就是将模板解析成AST。
在解析器内部,分成了很多小解析器,其中包括过滤器解析器、文本解析器和HTML解析器,然后通过一条主线将这些解析器组装在一起。
- 过滤解析器的作用就是用来解析过滤器的;
- 文本解析器的主要作用是用来解析带变量的文本;
例如:Hello{{name}} // name就是变量,而这样的文本叫做带变量的文本。如果不带变量的文本是一段纯文本,不需要使用文本解析器来解析
- HTML解析器,它是解析器最核心的模块,它的作用就是解析模板
主线上做的事情就是监听HTML解析器。每当触发钩子函数时,就生成一个对应的AST节点。生成AST前,会根据类型使用不同的方式生成不同的AST。例如,如果是文本节点,就生成文本类型的AST。当HTML解析器把所有模板都解析完毕后,AST也就生成好了。
优化器
优化器的目标是遍历AST,检测出所有的静态子树(永远不会发生变化的DOM节点)并给其打标记。
当AST中的静态子树被打上标记后,每次重新渲染时,就不需要为打上标记的静态节点创建新的虚拟节点,而是直接克隆也存在的虚拟节点。除了首次渲染之外,后续不需要任何重新渲染操作。
代码生成器
代码生成器,它的作用是将AST转换成渲染函数中的内容,这个内容可以称为 “代码字符串”,这样的代码字符串最终导出到外界使用时,会将代码字符串放到函数里,这个函数叫做渲染函数。当渲染函数被导出到外界后,模板编译就任务就完成了。
渲染函数的作用就是创建vnode
。