javascript - React Virtual Dom 中涉及三棵树,还是只有两棵?

原文 标签 javascript dom reactjs tree virtual-dom

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

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

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

最佳答案

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 的 Angular 色)。

    关于javascript - React Virtual Dom 中涉及三棵树,还是只有两棵?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37531514/

    相关文章:

    javascript - 使用javascript生成分组复选框JQuery mobile

    javascript - jQuery-通过多个不同的选择器进行选择

    dom - .bind 到 .each 循环中的 dom 对象

    javascript - Angular - 如何使用一个功能来管理多个切换/点击事件?

    reactjs - 在nextjs中我想控制日志的输出

    javascript - 如何以正确的顺序显示月份?

    javascript - 如何/为什么 “*[attribute^="字符串“”是一个有效的 querySelector?(JS 错误?)

    dom - 浏览器 DOM 树和渲染树有什么区别

    javascript - 单击时渲染 react 组件

    javascript - AngularJS - 使用 REST API 调用加载图像