ReactJS学习笔记六:感想 - 为什么说Virtual DOM 是React的精髓所在
2017-05-15 18:19
225 查看
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的组件全部取一个公共子集,抽象成统一的接口。
可能很多人包括我看完官方文档之后对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的组件全部取一个公共子集,抽象成统一的接口。
相关文章推荐
- ReactJS学习笔记六:感想 - 为什么说Virtual DOM 是React的精髓所在
- ReactJS学习笔记:感想 - 为什么说Virtual DOM 是React的精髓所在
- Virtual DOM 是React的精髓所在
- 基于React的Virtual-dom的学习
- React虚拟DOM的原理&&为什么使用虚拟DOM
- React为什么要尽量避免操作DOM
- React Virtual DOM、Ember Glimmer和Incremental DOM技术哪家强
- 为什么使用 React? Edit on GitHub
- Vue.js 2.0窥探之Virtual DOM到底是什么?
- 解决 react-router / react-router-dom v4 history不能访问的问题
- React将组件渲染到指定DOM节点
- React、ReactDOM、ReactDOMServer相关API
- C++中基类的析构函数为什么要用virtual虚析构函数
- C++中基类的析构函数为什么要用virtual虚析构函数
- react.js:20157 Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM
- 【React自制全家桶】三、React使用ref操作DOM与setState遇到的问题
- 【react-router】从Link组件和a标签的区别说起,react-router如何实现导航并优化DOM性能?
- C++中基类的析构函数为什么要用virtual虚析构函数
- 为什么学习React Native三点原因
- 为什么我们要造React?