版本是3.0.4的,间接拜访这里看残缺源码
先看上面的简略例子:
运行成果是这样的:
当初咱们一起看看“哈哈哈”这三个字是怎么渲染进去的,先看看源码的这个地位
打印出这些内容
这里能够看出其实就是对这段代码的形容
最外层蕴含tag是div,外面蕴含一个子元素children,children外面含有一个content,寄存变量text
持续往下走,看到源码这个地位
打印出这些内容
看到个字符串,是一个很像函数的字符串,是的,这个字符串是能够作为参数,通过new Function转成真正的函数。从函数体大略能够理解到外面的逻辑:_createBlock函数解决div标签,第三个参数是div外面的货色,应用_toDisplayString函数解决,外面蕴含变量text
看看这个函数运行后返回的后果,源码定位到这里
打印出这些内容
从运行后果能够看出曾经把变量text赋值成“哈哈哈”了,前面就是patch过程,也就是比照前后两个subtree的不同从而更新dom,为什么会呈现两个subtree呢?因为咱们在跟页面交互时会扭转状态,从新生成一个新的subtree,而后新旧subtree就能够比照了。然而咱们当初只看初始化(首次渲染)的过程,没有上一个subtree,patch就放到前面讲。
从下面能够晓得大略的流程:
生成ast====>生成render函数====>生成subtree====>patch====>渲染页面
前面会具体说下每个阶段的细节。
本文由博客群发一文多发等经营工具平台 OpenWrite 公布
发表回复