请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

关于 oldVNode 上的 classInstance 和 oldRenderVNode 属性

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

正在回答

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;
}

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
}


2 回复 有任何疑惑可以回复我~
  • 老师,这一部分的讲解是不是被剪掉了,也就是 oldVNode 上的 classInstance 和 oldRenderVNode 两个属性的处理
    回复 有任何疑惑可以回复我~ 2023-08-08 13:42:17
  • 有可能。这里解释下基本思路。对于getDomByFunctionComponent而言,其实就是将函数组件对应虚拟DOM和其返回值对应的虚拟DOM进行关联。对于getDomByClassComponent而言,就是将类组件对应的虚拟DOM,和类组件render函数返回的虚拟DOM进行关联。这样在更新的时候,就能取到函数组件或者类组件对应的和渲染相关的虚拟DOM进行使用。
    回复 有任何疑惑可以回复我~ 2023-08-08 15:48:56
  • 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这样吗?
    回复 有任何疑惑可以回复我~ 2023-08-28 02:35:21
用户名已被占用 2024-04-29 21:28:04

这里没说清楚

0 回复 有任何疑惑可以回复我~
慕前端4078102 2023-08-05 15:09:04

謝了哥,正想問這邊

0 回复 有任何疑惑可以回复我~
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信