javascript - 父 DOM 节点更改类型时的 ReactJS 协调

Question

组件呈现以下 React 元素树。

<div>
  <Counter />
</div>

然后状态或 props 发生变化并触发渲染，从而产生以下 React 元素树。

<span>
  <Counter />
</span>

Counter 组件的实例(构造函数等)是否会被完全重新实例化？

如果是这样，同样的行为是否适用于非根节点，例如:

<div>
  <div>
    <Counter />
  </div>
</div>

过渡到...

<div>
  <span>
    <Counter />
  </span>
</div>

Answer 1

是的，它将重新实例化 Couter组件上

<div>
  <Counter />
</div>

到

<span>
  <Counter />
</span>

Reconciliation 中指定的进程说:

This will destroy the old Counter and remount a new one.

对于第二个示例，它将比较 <div>首先，没有任何变化，但下一个场景与上面相同，因此它也会 remount Counter组件。