2

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

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

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

4

1 回答 1

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）。

于 2016-05-30T19:37:50.960 回答