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的组件全部取一个公共子集,抽象成统一的接口。
来源:oschina
链接:https://my.oschina.net/u/2481159/blog/708699