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 在這里帶有 - 有點 - 概念證明，包含用於更改狀態、直接 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作用）進行了很好的解釋。