198e801edb2406b84ed77b06b0616aaf
iOS 开发是否要采用 React Native?

前言

React Native 是 Facebook 2015年开源的 Javascript 框架,旨在使用 Javascript 高效开发手机端 App。配合着多个显而易见的优势和 Facebook 强大的宣传机器,它立刻成为国内外大小公司的明星开发框架。开源社区的参与激情、各方博客的宣传追捧,从其 Github 上 56000+ 星和 13000+ Fork 就可见一斑。

对于 React Native,iOS 开发者社区也是褒贬不一。有人认为 React Native 更快更好,苹果原生那套要完,不赶快学习就晚了;也有人认为 React Native 不过是 Facebook 的又一个玩具,以它现在的稚嫩还难以对原生的 Swift/Objective-C 造成足够威胁。

笔者希望就这几年亲身开发 React Native 和原生 iOS 的经验,以及在硅谷的所见所闻,对这个问题提出一点自己的看法。对于一门新技术,我个人认为,评判其是否值得采用有以下两个标准:

  • 该技术本身是否具备足够的优点
  • 该技术是否符合目前的开发需求

下面就将从技术和开发需求两个角度出发,谈一谈 React Native。

React Native 的技术特点

React Native 的优点很明显。官网的醒目位置有简单介绍,开发者们也在各种场合做了相关说明,总结如下:

  • 跨平台开发。同一段 Javascript 代码可以被用于 iOS 和 Android 两个平台。相比于以前 iOS 和 Android App 各维护一套逻辑大同小异的代码,React Native 的开发、测试和维护成本要低很多。

  • 快速编译。比起 Xcode 中漫长的编译,React Native 采用了热加载(Hot Reload)的即时编译机制,使得 App UI 的开发体验大幅改善,几乎到了和网页开发一样随改随变的效果。

  • 快速发布。通过 JSBundle,React Native 可以即时更新 App。相比原来冗长的审核和上传过程,发布和测试新功能的效率大幅提高。

  • 渲染和布局更加高效。React Native 可以直接套用网页开发的 CSS 和 flex 机制,摆脱了 autolayout 和 frame 布局中繁琐的数学计算,更加直接简便。

  • 简单易学。相比于 iOS 和 Android 的一整套复杂的知识体系,React Native 从本质上来讲就是状态机,对于开发者来讲理解不难,且实际操作可谓入门容易、上手轻松。如果是前端开发者,那么对于 Javascript 本来就有相应了解,用 React Native 开发手机应用更是水到渠成。

React Native 的跨平台特性是最大卖点

当然,看上去很完美的 React Native 在技术上也有诸多风险,比如:

  • 第三方依赖。React Native 严重依赖于 Facebook 的维护。苹果在 iOS 上每次技术的更新、政策的改变都会让原来使用了 React Native 代码库受到影响,等待 Facebook 和社区的修复会妨碍 App 的更新和用户体验。前段时间,百度和开发者们弃用
    React Native 而迫使的 Facebook 修改开发者权限(License)事件,证明了开发依赖于第三方的风险确实存在。

  • 逻辑上的额外开销。直到今天, React Native 依然只是0.49版本,仅仅支持简单的 UI 制作,其不成熟的 API 连复杂的动画都难以实现,更别提 iOS 的底层优化和兼容操作。同时因为操作系统和设备的不同,React Native 得分别进行针对性处理,这对代码库的维护又是一个挑战。

  • 联调的困难。对于原生的 iOS 和 Android App 引入 React Native,会增加整个代码库的复杂度,在深入底层原生代码进行 debug 时也是困难重重,可以说是在开发和维护上的成本都有所增加。

另外,有很多人觉得 React Native 的性能不如原生的 Objective-C/Swift 好。笔者自己尝试过,觉得差别不大。与硅谷很多开发者的交流中得知,React Native 的性能与原生相比只有毫秒只差,根本不会对用户体验造成影响。对此感兴趣的朋友可以阅读此文Comparing the Performance between Native iOS (Swift) and React-Native,文中在 CPU、GPU、内存3个维度上进行了多个 API 的比较,React Native 与原生的 Swift 相比真是不遑多让。

top Created with Sketch.