2015年9月15日Facebook发布了ReactNative for Android,引发了学习使用ReactNative开发跨平台引用的热潮。目前React Native发布到了0.44的版本。最近项目中考虑是否要接入ReactNative,所以对ReactNative进行了一些调研性的工作。
ReactNative简介
在reactnative中文网上有以下简介:
React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。 React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once,write anywhere) Facebook已经在多项产品中使用了React Native,并且将持续地投入建设React Native。
React Native是使用javascript和react来实现跨平台开发的,React Native提倡组件化开发: 即提供一个个封装好的组件,组件相互嵌套形成新的组件.你可以完全将App使用ReactNative编写,也可以使用原生和react native混合和的方式。由于目前React Native才发布到0.44版本,还没有发布正式的1.0,其变动相对比较频繁,在react native升级后经常导致项目不能运行,你必须去做额外的工作来保证项目正常的运行。不过最近React Native的发布已经慢慢趋于稳定了,现在基本是1-2个月发一次版本更新,更新内容也没有之前变化那么大了。
众所周知Android的碎片化和厂商的定制化是影响app稳定的很重要的原因之一,尤其是在国内,各个手机厂商都对Android系统进行了深度定制。这样的问题在ReactNative上也有很明显的体现,ReactNative在兼容Android各个系统版本和厂商版本的时候会暴露出不少的问题,目前React Native只支持Android 4.1以上,IOS 7.0以上的版本.附上最新的Android版本分布,Android3月份分版本分布可以看到Android 4.0的应用占比基本在%1左右,所以影响不大。
在2017年3月爆发了一股苹果商店禁止热更新的事件,很多人都担心苹果是否会封掉Reactnative,其实苹果想要禁止的是热更新的功能。在苹果的拒绝邮件上也只是说明拒绝热更新的能力。从目前来看,这2个月苹果ReactNative依然可以过审。在各个论坛上也并未发现此次禁止热更新对ReactNative有较为明显的影响。
ReactNative VS 原生 VS Hybrid
实现
(hybrid和 phoneGap APICloud AppCan等思想相同)
hybrid是一款h5的跨终端的解决方案,思想是 编写一次,就可以跨平台。
本质上hybrid还是web界面,只不过针对各个平台提供了一些调用native方法的api,通过js 和 native交互进行通信。
用web渲染界面是比较耗时的,为了解决界面的渲染耗时,react-native将界面用原生实现,而js部分只负责描述界面并将描述后的界面通过js和native的交互机制通知给终端,让终端根据js传递过来的界面描述信息来选择本地的控件进行界面的拼装。react-native的思想是 学习一次,可以跨平台开发(仍需要各个终端的人配合)。
性能
原生 > ReactNative > Hybrid
具体的性能对比参数可以查看H5、React Native、Native应用对比分析
开发&维护
以下成本和更新能力模块参考了H5、React Native、Native应用对比分析
维护成本
Hybrid < ReactNative < 原生
Hybrid是H5的夸平台解决方案,ReactNative可以达到百分之90左右的代码共用,但仍需要终端支持。
H5/Hybird: Web代码 + iOS/Android平台支持
React Native:可以一个开发团队 + iOS/Android工程师;业务组件颗粒度小,不用把握全局即可修改业务代码。
Native:iOS/Android开发周期长,两个开发团队。
总结:React Native 统一了开发人员技术栈,代码维护相对容易。
更新能力
H5/Hybird: 随时更新,适合做营销页面,目前携程一些BU全部都是H5页面;但是重要的部分还是Native。
React Native:React Native部分可以热更新,bug及时修复。
Native:随版本更新,尤其iOS审核严格,需要测试过关,否则影响用户。
React-Canvas
为了解决webapp渲染dom的效率问题,Flipboard推出了一款react-canvas,它的思想是用做游戏的方式来做app。界面渲染针对到canvas上,通过重新定义绘制过程来减少web界面渲染时候的开销问题。
react-canvas 也是使用的css-layout和react-native一致,也集成了react,只是最终界面是通过canvas展示的。
react-canvas因为是针对webapp的,所以它的灵活性要比react-native强,渲染的卡顿问题比较接近原生,由于react-canvas还是一个webapp所以有一些原生的界面效果不太好处理。react-canvas如果要和native交互需要单独提供本地的基础库和js和native的通信机制。
其实react-native可以理解成重写了一个简版的web浏览器,它只支持一些特殊的定制化界面,用native实现界面渲染来达到原生的体验效果。
案例
目前国内使用ReactNative的还不是很多(有些小的应用是完全用React Native来实现的),比较出名的是 携程的火车票模块, QQ空间,销售易的包中也发现了React Native的痕迹。要想看到更多的国内案例可以通过react native中文网收集的案例上查看: ReactNative案例。