浅析ReactNative的优劣
关于React Native
React Native 是 FaceBook 2015 年开源的基于React 的 javascript 框架,旨在使⽤javascript⾼效开发⼿机端应⽤。 ⽬前它在github 上已经拥有59000+ 的Star 和 13000+ 的Fork,可见其受追捧的程度。
React Native 的⼯作原理
React Native的原理,就是在底层把React转换为原⽣API。React Native会在⼀开始⽣成OC模块表,然后把这个模块表传⼊JS中,JS参照模块表,就能间接调⽤OC的代码。
React Native 需要⼀个JS的运⾏环境, 在IOS上直接使⽤内置的javascriptcore, 在Android则使⽤官⽅开源的jsc.so。 此外还集成了其他开源组件,如fresco图⽚组件,okhttp⽹络组件等。
具体原理可以参考
React Native 与原⽣的⽐较
React Native 的技术优势
垮平台开发 。相⽐原⽣的ios 和 android app各⾃维护⼀套业务逻辑⼤同⼩异的代码,React Native 只需要同⼀套javascript 代码就可以运⾏于ios 和 android 两个平台,在开发、测试和维护的成本上要低很多。
快速编译 。相⽐Xcode中原⽣代码需要较长时间的编译,React Native 采⽤热加载的即时编译⽅式,使得App UI的开发体验得到改善,⼏乎做到了和⽹页开发⼀样随时更改,随时可见的效果。
快速发布。React Native 可以通过 JSBundle 即时更新 App。相⽐原来冗长的审核和上传过程,发布和测试新功能的效率⼤幅提⾼。
渲染和布局更⾼效 React Native 可以直接套⽤⽹页开发中的css布局机制。脱了 autolayout 和 frame 布局中繁琐的数学计算,更加直接简便。
原生js和js的区别简单易学。 相⽐于 iOS 和 Android 的⼀整套复杂的知识体系,React Native 从本质上来讲就是状态机,对于开发者来讲理解不难,且实际操作可谓⼊门容易、上⼿轻松。如果是前端开发者,那么对于 Javascript 本来就有相应了解,⽤ React Native 开发⼿机应⽤更是⽔到渠成。
React Native 的缺点。
动画性能。React Native 在动画效率和性能的⽀持还存在⼀些问题,性能上不如原⽣Api。
第三⽅依赖。React Native 严重依赖于 Facebook 的维护。苹果在 iOS 上每次技术的更新、政策的改变都会让原来使⽤了 React Native 代码库受到影响,等待 Facebook 和社区的修复会妨碍 App 的更新和⽤户体验。前段时间,百度和开发者们弃⽤React Native ⽽迫使的 Facebook 修改开发者权限(License)事件,证明了开发依赖于第三⽅的风险确实存在。
逻辑上的额外开销。直到今天, React Native 依然只是0.52版本,仅仅⽀持简单的 UI 制作,其不成熟的 API 连复杂的动画都难以实现,更别提 iOS 的底层优化和兼容操作。同时因为操作系统和设备的不同,React Native 得分别进⾏针对性处理,这对代码库的维护⼜是⼀个挑战。
调试的困难。对于原⽣的 iOS 和 Android App 引⼊ React Native,会增加整个代码库的复杂度,在深⼊底层原⽣代码进⾏ debug 时也是困难重重,可以说是在开发和维护上的成本都有所增加。
不能完全屏蔽原⽣平台。 就⽬前的React Native 官⽅⽂档中可以发现仍有部分组件和API都区分了Android 和 IOS 版本,即便是共享组件,也会有平台独享的函数。也就是说仍不能真正实现严格意义上的“⼀套代码,多平台使⽤”。另外,因为仍对ios 和android的原⽣细节有所依赖,所以需要开发者若不了解原⽣平台,可能会遇到⼀些坑。
总结
就当前⽽⾔,更需要快速开发,且业务功能相较简单的情况下,React Native可以发挥更⼤的优势。但在开发核⼼的、复杂的或需要功能中使⽤React Native仍然存在着⼀定的风险和劣势。
拓展:React Native 与 weex
React Native 和 Weex 都是⽤于开发跨平台应⽤的框架。
Weex
weex是阿⾥巴巴公司与2016年6⽉开源的⼀种⽤于构建移动跨平台的UI框架。
Weex基于Vue的语法开发的App,底层会⾃动把JS代码解析成对应平台(iOS,安卓)的原⽣API,本质还是原⽣API开发,只不过表⾯是⽤Vue 开发。
React Native 与 weex 的⽐较。
共同点。
都采⽤Web的开发模式,使⽤JS开发;
都可以直接在Chrome中调试JS代码;
都⽀持跨平台的开发;
都可以实现hot reload,边更新代码边查看效果;
不同点。
js引擎。weex使⽤V8, ReactNative使⽤JSCore。
基本框架语法性能。RN是基于React,weex则基于vue。两者的主要区别在于vue的语法更加轻便简单,且vue的组件更新渲染速度会⽐react更快⼀点。(参考 )。
跨平台。RN仅⽀持ios和android,且在部分组件功能的使⽤上仍需开发者根据平台选择使⽤对应的组件或api,并⾮真正意义的⼀套代码跨平台;weex可以做到⼀套代码,ios、android、web三平台使⽤,底层会根据当前平台⾃动判断调⽤对应的原⽣API,连h5页⾯都不⽤再开发。
代码打包。React Native官⽅只能将ReactNative基础js库和业务js⼀起打成⼀个js bundle,没有提供分包的功能,需要制作分包打包⼯具;weex默认打的js bundle只包含业务js代码,体积⼩很多,基础js库包含在weex sdk中。
渲染性能。React Native默认没有优化机制,长view渲染性能会⽐较差;weex提供了node和tree两种渲染模式,优化长view的渲染。
环境搭建。React Native需要按照⽂档安装配置很多依赖的⼯具,相对⽐较⿇烦;weex安装脚⼿架cli之后就可以使⽤。
社区⽀持。在github上React Native 有将近6万的star ⽽ Weex⼤约只有1.6万star,可见React Native的⽀持⼈数和社区规模暂时还是处于优势地位,也意味着⽣态更加完整,资料⽂档更加齐全和规范。
⼩结
在weex 和 RN的对⽐中,weex在开发成本和性能优化上可能⽐RN会略胜⼀筹,但基于社区规模的原因,weex⽂档资料不⾜所引发的问题也被⼀些开发者所诟病。在开发的选择上,开发者或许可以依据⾃⾝原本的技术栈vue或react来进⾏选择,从⽽减少学习成本。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。