Virtual DOM 是React的精髓所在

三世轮回 提交于 2020-03-01 00:17:06

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!