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