周星星

Appearance

前言 ​

这次主要是沿着patch这条线继续往下走，当第一次patch-component向下走的时候 最后一定会递归，直到把整棵树全部给他渲染出来，最终展现在面前的组件内的元素。

首次patch ​

首次patch的时候，我们进来的执行的是processComponent

image.png

在processComponent中由于第一次是n1还是空的，所以我们接下来执行的是mountComponent

image.png

在mountComponent做了什么呢？根组件创建过程

1、创建组件实例 compatMountInstance

2、初始化组件实例 setupComponent

  • setup - 编译render选项
  • applyOptions

3、获取vnode setupRenderEffect

  • 创建一个组件更新函数
    • render获得vnode
    • patch(oldVnode，vnode)
  • 创建更新机制： new ReactiveEffect(更新函数)

image.png

在 setupRenderEffect中，有两个作用创建一个组件更新函数、创建更新机制

image.png

在componentUpdateFn中首次执行instance.isMounted是false，执行的是接下里的这段的

image.png

再次patch ​

这个时候进来我们执行的不是processComponent，而是processElement

image.png

在processElement中，执行的是mountElement

image.png

在mountElement中创建真实的DOM

image.png

hostCreateElement就是创建真实DOM的方法，他来自createRenderer给baseCreateRenderer传入的，

image.png

接下来就是这个，设置某个节点的文本内容

image.png

这里可能会发生递归的，因为如果说我们还有子元素等，就会去执行mountChildren而不是hostSetElementText

image.png

设置元素class、id

image.png

追加到父元素上hostInsert

image.png

这样页面就可以出来了

总结 ​

image.png

知识是重复的，但是内容更细了