关于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则使用webkit.org
官方开源的jsc.so
。 此外还集成了其他开源组件,如fresco图片组件,okhttp网络组件等。
具体原理可以参考【React Native】从源码一步一步解析它的实现原理
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 布局中繁琐的数学计算,更加直接简便。
- 简单易学。 相比于 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来进行选择,从而减少学习成本。