React本身只是一個DOM的抽象層崭闲，使?組件構(gòu)建虛擬DOM
首先來看，什么是Virtual DOM
簡單來說，Virtual DOM本身只是一個js對象
進(jìn)一步說鼠证，Virtual DOM是一種編程概念涛目，我們使用js對象描述真實的DOM節(jié)點秸谢。當(dāng)這個真實的DOM節(jié)點需要變化時，我們先去更改js對象霹肝，然后通過這個js對象來同步更改DOM節(jié)點估蹄。這個過程我們稱之為協(xié)調(diào)。協(xié)調(diào)的核心：diff
Fiber是React16中新增的協(xié)調(diào)引擎沫换。它的目的是使Virtual DOM可以進(jìn)行增量式渲染
為什么使用Virtual DOM
簡單來說臭蚁，使用Virtual DOM性能高
原因是DOM操作很慢，輕微的操作都可能導(dǎo)致頁面重排讯赏，非常消耗性能垮兑。相對于DOM對象，js對象處理起來更快漱挎，而且更簡單系枪。通過diff算法比對新舊vdom之間的差異，可以批量的磕谅、最小化的執(zhí)行dom操作私爷，從而提高性能。
其實真實DOM也是一個對象怜庸，但是非常大当犯。如下，將div標(biāo)簽對應(yīng)的真實DOM odiv的key值打出來
<body>
<div></div>
</body>
<script>
let odiv = document.getElementsByTagName('div')[0]
let str = ''
for (const key in odiv) {
str += ' ' + key
}
console.log(str)
</script>
可以看見割疾，原生dom節(jié)點非常龐大嚎卫。如果直接diff這個對象，那成本太高了
那在React中宏榕，如何使用了Virtual DOM
React中可以使用JSX語法描述視圖拓诸，通過babel-loader轉(zhuǎn)譯后它們變成React.createElement(...)形式，該函數(shù)將生成vdom來描述真實dom麻昼。將來如果發(fā)生狀態(tài)變化奠支，vdom將作出相應(yīng)變化，再通過diff算法比對新老vdom區(qū)別抚芦，從而做出最終dom操作
以上是關(guān)于React Virtual DOM的簡單理解
