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

【问题标题】：Are there three tree's involved in the React Virtual Dom, or just two?React Virtual Dom 中涉及三棵树，还是只有两棵？
【发布时间】：2016-09-28 15:05:29
【问题描述】：

使用 React 虚拟 Dom，我了解子树部分，或者至少我认为我了解：React 只会从调用了 setState 的组件以及这些组件的所有子组件重新渲染。即，尚未调用 setState 方法的组件，也不是已调用组件的子组件，可以安全地重新渲染。

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

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

【问题讨论】：

据我所知，它将旧虚拟 dom 与“下一个”虚拟 dom 进行比较。
在获得“差异”之后，是否将这些更改应用于实际 DOM？

标签： javascript dom reactjs tree virtual-dom

【解决方案1】：

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

Codepen here 带有 - 某种 - 概念证明，包含用于更改状态、执行直接 DOM 更新和重新渲染的按钮：

来自 codepen 的代码 sn-p：

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 的角色）。

【讨论】：