有些疑惑

Question

`react-dom.js`
function getDomByClassComponent(VNode) {
  let { type, props } = VNode;
  let instance = new type(props);
  let renderVNode = instance.render();
  instance.oldVNode = renderVNode; // <--- 这里的 instance 并没有被引用到，只是返了 instance.render

  if (!renderVNode) return null;
  return createDOM(renderVNode);
}

`Component.js`
 update() {
   let oldVNode = this.oldVNode; // <--- 第一次，这里是怎么和 instance.oldVNode = renderVNode; 关联上的
   let oldDOM = findDomByVNode(oldVNode);
   let newVNode = this.render();

   updateDomTree(oldDOM, newVNode);
   this.oldVNode = newVNode;
 }

老师，有个问题有点疑惑，getDomByClassComponent 函数最终返回的是 createDOM(renderVNode)，函数内部创建 instance 实例，最终并没有被引用， instance.oldVNode 赋的值。Component.js 中的 update 函数第一次是怎么拿到这里 instance.oldVNode 赋的值呢？

Answer 1

杨艺韬 2023-08-12 22:24:41

instance是Component的一个实例，因此instance.oldVNode和Component.js中的this.oldVNode实际上是同一个属性。