React Virtual Dom 中是否涉及三棵树，还是只有两棵树？

Question

对于 React 虚拟 Dom，我理解子树部分，或者至少我认为我是这样理解的：React 只会从调用了 setState 的组件重新渲染，并且可能是这些组件的所有子组件。 即没有调用 setState 方法的组件，也没有调用过的组件的子组件，可以安全地重新渲染。

我不清楚的部分是，当 React 在这些节点上进行协调过程时，它到底在比较什么？ 我相信在这一步我们有一个新生成的虚拟 DOM 树，但是它是否将它与旧的虚拟 DOM 树进行比较，然后将这些更改应用于实际 DOM，或者这个协调过程是在新生成的虚拟 DOM 之间完成的吗？ , 和实际的 DOM 直接？

根据上述答案，我可能会有一个后续问题。 谢谢！

Answer 1

React 将下一个虚拟 DOM 与之前的虚拟 DOM 进行比较，并且仅在它们不同时才应用更新。
React 不知道对真实 DOM 的任何直接更改。 如果它不在 react 的虚拟 DOM 中，那么 react 不知道它。

Codepen 在这里带有 - 有点 - 概念证明，包含用于更改状态、直接 DOM 更新和重新渲染的按钮：

来自 codepen 的代码片段：

illegalUpdate() {
  // Illegal direct DOM update, 
  // to check whether component is destroyed after re-render
  document.getElementById("id1").style.backgroundColor = "red";
}

render() {
  ...
  return (
    <div>
      {component1}
      {component2}
      <p><button onClick ={() => this.illegalUpdate()}>
    </div>
  );
}

概括：

• 您可以非法将组件的真实 DOM 颜色从绿色更改为红色，然后重新渲染。
• 组件颜色保持红色（即使组件的代码将颜色设置为绿色）
• react 不知道在真实 DOM 中所做的更改。
• react 将新的虚拟 DOM 与旧的虚拟 DOM 进行比较。
• 两者的颜色都是绿色。
• 所以没有更新：颜色保持红色。

进一步实验： - 如果您合法地将组件类型从 p 更改为 H1，反之亦然，react 将替换整个 DOM 元素。 那么组件将再次显示为绿色。

如需进一步阅读，您还可以查看有关高级性能的反应页面，其中对应用于组件树的虚拟 dom 和渲染（包括shouldComponentUpdate作用）进行了很好的解释。