javascript - 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 here带有 - 某种 - 概念验证，包含更改状态、直接更新 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 元素。因此组件将再次显示为绿色。

如需进一步阅读，您还可以查看 react page on advanced performance ，很好地解释了虚拟 dom 和应用于组件树的渲染(包括 shouldComponentUpdate 的作用)。