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

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

1 个答案: