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的组件全部取一个公共子集，抽象成统一的接口。