Virtual DOM 是React的精髓所在

Virtual DOM 毫無疑問是 React 的精髓。

可能不少人包括我看完官方文檔以後對Virtual DOM的理解就是：

它經過JS對象模擬原生DOM，加上DOM Diff 極大提高了DOM操做的性能。

這裏的感受就是這玩意最大的意義在於性能的提高。由於JS對象比DOM對象性能高。

 

若是這樣理解其實徹底忽略了 Virtual DOM 最精髓最顛覆性的意義：抽象。

 

Virtual DOM 最大的意義毫不是提高性能，而是他對DOM進行了一層抽象。當咱們在瀏覽器中使用 React的時候，感受不是特別明顯，畢竟咱們寫的DOM標籤跟原生的沒什麼區別，而且最終都被渲染成了DOM。

可是react native 的推出已經徹底說明了 Virtual DOM 的顛覆性意義：它抽象了DOM的具體實現。

在瀏覽器中，Virtual DOM最終編譯成了DOM，可是在 iOS中，Virtual DOM卻徹底能夠編譯成 oc 中的組件，甚至在安卓、windows、mac osx 中都徹底能夠編譯成對應的UI組件。

 

在沒有Virtual DOM以前，咱們的代碼中JS邏輯和UI是徹底耦合的，不具備任何可移植性。

使用了Virtual DOM以後咱們的代碼編程這樣了：

 

 

注意上圖分爲三個部分：

1，其中藍色部分是JS業務邏輯，徹底能夠藉助Node移植到任意平臺上。

2，其中紅色部分是 Virtual DOM，雖然抽象了，可是在不一樣的平臺上有不一樣的實現。不能徹底移植，可是用法基本一致。

3，其中綠色的是咱們不關心的底層UI調用。

 

而這正是 React native 的作法。React native 的iOS實現，就是能夠把 Virtual DOM 編譯成 iOS的UI組件。除了這些組件的用法和瀏覽器中的DOM有些不一樣以外，其餘的徹底是同樣的。

爲何說 React Native 提倡「一次學習，處處編寫」，而不是像java同樣 「一次編寫，處處運行」。是由於它只是把iOS的UI組件作了抽象，可是並無打算把 瀏覽器，iOS和Android的全部組件所有抽象成統一接口。因此你在Web上編寫的代碼在 iOS上通常是跑不通的，由於你會用一些 DOM纔有的特性，好比 style=‘hight:20px;’。

 

而 java 爲何能作到 「一次編寫，處處運行」。是由於它在全部的平臺上都提供了統一的UI實現。

其實 React Native 也能夠學習java awt的作法來作到 「一次編寫，處處運行」。就是把瀏覽器，IOS，android的組件所有取一個公共子集，抽象成統一的接口。