React 的虛擬 DOM

Question

我知道這可能是重復的，但我真的很難理解 React 的協調算法的這一部分。 所以 Virtual DOM 是 Real DOM 的 memory 表示。 每當我們調用 setState() 時，React 會創建另一個 Virtual DOM 副本並將其與前一個副本進行比較，或者它會更改現有的 Virtual DOM 並將其與 Real DOM 進行比較？

Answer 1

僅在 Virtual DOM 實例中進行或比較任何更改。

當您執行 setState 時，React 會創建另一個具有所需更改的虛擬 DOM 副本，並比較舊的和當前的虛擬 DOM 以僅在瀏覽器中的實際 DOM 中應用更改

您可以在 React 文檔中閱讀有關Virtual DOM and its implemntation的更多信息

根據反應文檔中的 Reconcilation 鏈接

Reconciliation是被普遍理解為“虛擬 DOM”的算法。 一個高級描述是這樣的：當你渲染一個 React 應用程序時，一個描述應用程序的節點樹會生成並保存在 memory 中。 然后將該樹刷新到渲染環境——例如，在瀏覽器應用程序的情況下，它被轉換為一組 DOM 操作。 當應用程序更新時（通常通過 setState），會生成一個新樹。 新樹與之前的樹進行比較，以計算更新渲染應用程序所需的操作。