这块有点麻烦,总结了一下过程老师您看对不
来源:3-5 patch(下)

小学生6年级
2020-03-09
假设组件A 下面有三个 child [‘普通’, ‘普通’, 组件B]
现在 A 已经通过 render 生成了渲染 vnode,并在 _updateComponent 中开始 patch(即开始生成真的 DOM)【1】。
- 在 patch 函数中将会 createChildren(创建并真正将每一个 child 插入到父 DOM 上),也就是对每一个 child 执行 createElem ->
- 在 createElem 中,若这个 child 为占位符 vnode,则进入 createComponent 方法,若不是则直接生成 DOM 并插入到父节点 ->
- 调用占位符 vnode 的 init 函数,实例化这个 vnode ->
- 在 init 函数中调用 mount 方法 ->
- new 一个渲染 watcher ->
- 渲染 watcher 的特性:即在初始化时会调用回调函数,回调函数中通过 render 生成渲染 vnode,并在 _updateComponent 中开始 patch(即开始生成真的 DOM)【1】
一直到 【1】 处也就形成了一个递归。 在这边提问主要也是想给学习的小伙伴们一个参考,感觉这样子递归的一个过程列出来就很清晰了,当然这个递归的出口很简单,就是在上述第二步没有占位符 vnode 的时候。
写回答
1回答
-
其实就是在 patchElm 过程中如果遇到了一个组件 vnode(也就是你说的占位符 vnode),就是一个递归创建子组件的过程了,这也是树的深度遍历的方式,通过这种方式很容易实现嵌套组件的渲染了。
012020-03-09
相似问题