有沒有三棵樹參與React Virtual Dom，或者只有兩棵？

對於React虛擬Dom，我理解了子樹部分，或者至少我認爲我是這樣做的：React將只從具有其setState調用的組件重新渲染，並且可能包含這些組件的所有子組件。即沒有調用其setState方法的組件，也不是已組件的子組件，對於重新渲染而言是安全的。有沒有三棵樹參與React Virtual Dom，或者只有兩棵？

我不清楚的部分是，當React在這些節點上進行協調處理時，究竟是什麼比較？我相信在這一步我們有一個新生成的虛擬dom樹，但是它是否將它與舊的虛擬DOM樹進行比較，然後將這些更改應用到實際的DOM，還是在新生成的虛擬DOM之間完成了這個協調過程，和直接的實際DOM？

根據上面的答案，我可能會有後續問題。謝謝！

來源

2016-05-30 CADBOT

據我所知，它是比較舊的虛擬DOM到'下一個'虛擬DOM。 – azium

然後在獲得「diff」之後，將這些更改應用於實際的DOM？ – CADBOT

這是正確的。 – azium

React將下一個虛擬DOM與以前的虛擬DOM進行比較，並且只在它們不同時應用更新。
React對於真正的DOM的任何直接變化都是無知的。如果它不在react的虛擬DOM中，那麼反應並不知道它。

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顏色從綠色變爲紅色，然後重新渲染。
組件顏色保持紅色（即使組件的代碼將顏色設置爲綠色）
反應不知道在實際DOM中所做的更改。
react將新的虛擬DOM與舊的虛擬DOM進行比較。
在這兩個顏色是綠色的。
所以沒有更新：顏色保持紅色。

進一步實驗： - 如果從法律上改變p組件的類型以H1或反之亦然，反應將取代整個DOM元素。那麼組件會再次呈現綠色。

爲了進一步閱讀，您還可以查看react page on advanced performance，同時對組件樹（包括角色shouldComponentUpdate）的虛擬dom和渲染有很好的解釋。

來源

2016-05-30 19:37:50 wintvelt

有沒有三棵樹參與React Virtual Dom，或者只有兩棵？

回答

相關問題