关于 oldVNode 上的 classInstance 和 oldRenderVNode 属性

Question

在 updateClassComponent 和 updateFunctionComponent 两个方法中，分别使用了 oldVNode.classInstance 和 oldVNode.oldRenderVNode 属性，请问这两个属性是什么时候被设置到 oldVNode 对象上的，之前的视频中好像没有提及。

Answer 1

杨艺韬 2023-07-21 00:29:41

这两个属性是在初次挂载的时候设置上的，对应代码：

function getDomByFunctionComponent(vNode) {
    let { type, props } = vNode;
    let renderVNode = type(props);
    if (!renderVNode) return null;
    vNode.oldRenderVNode = renderVNode
    let dom = createDOM(renderVNode)
    vNode.dom = dom
    return dom;
}

function getDomByClassComponent(vNode) {
    let { type, props, ref } = vNode;
    let instance = new type(props)
    vNode.classInstance = instance
    ref && (ref.current = instance);
    let renderVNode = instance.render();
    instance.oldVNode = renderVNode
    if (!renderVNode) return null;
    let dom = createDOM(renderVNode);
    if (instance.componentDidMount) instance.componentDidMount();
    return dom
}

• 用户1135260 #1

  老师，这一部分的讲解是不是被剪掉了，也就是 oldVNode 上的 classInstance 和 oldRenderVNode 两个属性的处理

• 杨艺韬 回复 用户1135260 #2

  有可能。这里解释下基本思路。对于getDomByFunctionComponent而言，其实就是将函数组件对应虚拟DOM和其返回值对应的虚拟DOM进行关联。对于getDomByClassComponent而言，就是将类组件对应的虚拟DOM，和类组件render函数返回的虚拟DOM进行关联。这样在更新的时候，就能取到函数组件或者类组件对应的和渲染相关的虚拟DOM进行使用。

• worker1991 回复 杨艺韬 #3

  老师你好。以下代码：
  function getDomByFunctionComponent(vNode) {
      let { type, props } = vNode;
      let renderVNode = type(props);
      if (!renderVNode) return null;
      vNode.oldRenderVNode = renderVNode;
      let dom = createDOM(renderVNode);
      vNode.dom = dom;
      return dom;
  }
  为什么会有以下逻辑？
  let dom = createDOM(renderVNode);
  vNode.dom = dom
  这里的vNode是对应的FunctionalComponent，而dom是真实DOM，这里对应不上吧？不应该是vNode.oldRenderVNode.dom = dom这样吗？

点开查看后面3条评论

Answer 2

用户名已被占用 9天前

这里没说清楚

Answer 3

慕前端4078102 2023-08-05 15:09:04

謝了哥，正想問這邊