React中幾個核心的概念
-
虛擬
DOM（Virtual Document Object Model）DOM的本質是什麼：就是用JS表示的UI元素DOM和虛擬DOM的區別：DOM是由瀏覽器中的JS提供功能，所以我們只能人爲的使用 瀏覽器提供的固定的API來操作DOM對象；虛擬DOM並不是由瀏覽器提供的，而是我們程序員手動模擬實現的，類似於瀏覽器中的DOM，但是有着本質的區別- 虛擬
DOM：優化頻繁操作DOM引發性能問題的產物，將頁面的狀態抽象爲JS對象的形式，本質上是JS和真實DOM的中間層。當我們想用JS腳本大批量進行DOM操作時，會優先作用於虛擬DOM這個JS對象，最後通過對比將要改動的部分通知並更新到真實的DOM上。
-
Diff算法
-
tree diff:新舊DOM樹，逐層對比的方式，就叫做tree diff,每當我們從前到後，把所有層的節點對比完後，必然能夠找到那些 需要被更新的元素； -
component diff：在對比每一層的時候，組件之間的對比，叫做component diff;當對比組件的時候，如果兩個組件的類型相同，則暫時認爲這個組件不需要被更新，如果組件的類型不同，則立即將舊組件移除，新建一個組件，替換到被移除的位置； -
element diff:在組件中，每個元素之間也要進行對比，那麼，元素級別的對比，叫做element diff； -
key：key這個屬性，可以把 頁面上的DOM節點 和 虛擬DOM中的對象，做一層關聯關係；
![Diff算法圖]()
-
React的組件：和Vue中的組件一樣，抽離出頁面中的公共部分，提高代碼的複用性
