做移动开发,一直有一个痛点:iOS和Android是两个完全不同的平台,要用不同的语言、不同的工具、不同的框架开发。iOS用Objective-C(现在也有Swift了),用Xcode,用Cocoa Touch框架;Android用Java,用Android Studio,用Android SDK。如果想同时支持两个平台,就要写两套代码、维护两个团队、做两次测试,成本很高。

为了解决这个问题,出现了很多跨平台方案。最早的是PhoneGap(现在叫Cordova),用HTML+CSS+JavaScript写应用,然后用WebView套壳打包成原生应用。这种方案的优点是开发快、一套代码跑多平台,缺点是性能差——WebView的渲染速度和原生控件差很多,交互体验不流畅,访问原生功能(摄像头、定位、通知等)需要插件,体验不好。

后来出现了Appcelerator Titanium,用JavaScript写应用,但不是用WebView,而是把JavaScript代码编译成原生代码,调用原生控件。性能比PhoneGap好,但学习曲线陡,生态不完善,有很多坑。

还有Xamarin,用C#写应用,一套代码跑iOS和Android。性能不错,但需要用微软的技术栈,C#在移动开发领域比较小众。

这些方案都有各自的问题,没有一个能真正解决"跨平台+高性能+好体验"的三角难题。直到今天,React Native的发布,可能会改变这个局面。

React Native是什么

今天(2015年3月26日),Facebook在F8开发者大会上正式发布了React Native。这是一个用JavaScript写原生移动应用的框架,基于Facebook的React.js库。

React Native的核心理念是"Learn once, write anywhere"(学一次,到处写)。你只需要学习React和JavaScript,就能写出iOS和Android两个平台的原生应用。注意,不是"Write once, run anywhere"(写一次,到处跑)——Facebook不追求一套代码完全不修改跑两个平台,而是追求用同一套技术栈、同一套设计理念开发两个平台的应用,代码可以共享大部分,但平台相关的部分可以分别优化。

React Native最大的特点是:它不是WebView套壳,而是真正的原生渲染。应用的UI是用原生组件渲染的——iOS用UIKit的组件,Android用Android的原生控件。JavaScript代码只是控制逻辑和布局,最终渲染出来的是真正的原生控件,性能和原生应用几乎一样。

这和PhoneGap有本质区别。PhoneGap的UI是在WebView里用HTML渲染的,性能差、体验不好;React Native的UI是原生控件,性能好、体验流畅。

React Native的原理

React Native的工作原理大致是这样的:

  1. 开发者用JavaScript和React的语法写应用代码,包括组件、样式、逻辑。
  2. React Native在运行时启动一个JavaScript引擎(iOS用JavaScriptCore,Android也用JavaScriptCore),执行JavaScript代码。
  3. JavaScript代码通过React Native的桥接层(Bridge)和原生代码通信——JavaScript发送指令给原生端,原生端创建和更新原生UI组件、调用原生API。
  4. 原生端的事件(触摸、手势、生命周期等)通过桥接层传递给JavaScript端,JavaScript处理后再更新UI。

这个架构的好处是:JavaScript代码是跨平台的,大部分业务逻辑和组件代码可以在iOS和Android之间共享;而UI渲染是原生的,性能和体验接近原生应用。

样式方面,React Native用了一种类似CSS的样式系统,但不是真正的CSS。样式用JavaScript对象写,属性名和CSS类似(如flex、margin、padding、color等),布局用Flexbox。这种样式系统跨平台一致,不需要分别写iOS和Android的样式。

React Native的优势

相比其他跨平台方案,React Native有几个明显的优势:

第一,性能好。因为是原生渲染,性能和原生应用几乎一样,比WebView套壳的方案好很多。动画、手势、列表滚动这些对性能要求高的场景,React Native都能流畅处理。

第二,体验好。UI是原生控件,看起来和用起来都和原生应用一样,没有WebView那种"网页感"。用户很难分辨一个应用是用React Native写的还是用原生语言写的。

第三,开发效率高。用JavaScript开发,语法灵活,开发工具成熟。而且支持热重载(Hot Reload)——修改代码后,应用不需要重新编译,就能看到修改效果,开发体验非常好。这比原生应用每次修改都要重新编译快得多。

第四,代码复用率高。大部分业务逻辑、组件、样式可以在iOS和Android之间共享,只需要为平台差异部分写单独的代码。相比写两套完全独立的原生代码,能节省大量时间和人力。

第五,生态好。React Native基于React.js,React.js已经是非常流行的前端框架,有大量的开发者和丰富的生态。Web前端开发者可以很容易地转向React Native开发,不需要学习全新的语言和框架。

第六,Facebook背书。React Native是Facebook开源的,Facebook自己的应用(如Facebook、Instagram、Ads Manager)都在使用React Native,有大公司的持续投入和维护,不用担心项目死掉。

React Native的挑战

当然,React Native也不是完美的,它面临一些挑战:

第一,还不成熟。React Native今天才刚发布,还处于早期阶段。API可能会变化,bug可能比较多,第三方库和工具还不完善。生产环境使用可能会遇到一些坑。

第二,Android支持还不完善。这次发布主要支持iOS,Android版本还在开发中,预计几个月后才会发布。想同时支持两个平台,还需要等一等。

第三,原生模块需要自己写。虽然React Native提供了很多常用的原生组件和API,但如果需要用到一些特殊的原生功能(如特定的第三方SDK、复杂的自定义控件),还是需要写原生代码(Objective-C/Java)来封装成React Native模块。这意味着开发者还是需要懂一些原生开发知识。

第四,性能虽然好但还是有损耗。JavaScript和原生之间的通信通过桥接层,有一定的性能开销。在一些极端场景(如大量数据的列表、复杂的动画),性能可能还是不如纯原生应用。不过对于大部分应用来说,这个性能差异是感知不到的。

第五,调试和排错比较复杂。因为涉及JavaScript和原生两部分代码,调试起来比纯原生或纯Web应用复杂。不过React Native提供了Chrome开发者工具调试JavaScript,原生部分可以用Xcode或Android Studio调试,还算方便。

对移动开发的影响

React Native的发布,可能会对移动开发格局产生深远影响。

首先,它可能会降低移动开发的门槛。Web前端开发者可以用自己熟悉的JavaScript和React开发移动应用,不需要学习Objective-C或Java。这会让更多的开发者进入移动开发领域,增加移动应用的供给。

其次,它可能会改变跨平台开发的格局。之前的跨平台方案(PhoneGap、Titanium、Xamarin)都没有真正流行起来,各有各的问题。React Native凭借"原生渲染+JavaScript+React生态+Facebook背书"的组合,可能会成为跨平台开发的主流方案。

再次,它可能会影响原生开发的就业市场。如果React Native流行起来,企业可能不再需要分别招聘iOS和Android开发者,而是招聘React Native开发者,一套人马开发两个平台。这对原生开发者来说是一个挑战,但也可能是一个机会——原生开发者可以学习React Native,成为跨平台开发专家。

最后,它可能会推动"JavaScript全栈"的趋势。前端用React/React Native,后端用Node.js,数据库用MongoDB(JSON格式),整个技术栈都是JavaScript。开发者只需要掌握一门语言,就能做全栈开发。这种趋势已经在形成,React Native会进一步加速它。

我的看法和计划

作为一个Web开发者,我对React Native非常感兴趣。我一直在关注React.js,也在项目中使用过,对React的组件化思想和虚拟DOM机制很熟悉。React Native把React的思想带到了移动开发,用JavaScript写原生应用,这对我来说非常有吸引力。

我计划在React Native稳定一些后(比如1.0版本发布后),花时间学习一下,用它做一个小应用试试。毕竟,多掌握一门技术,就多一个可能性。而且如果React Native真的流行起来,会React Native的开发者会很抢手。

但我也不会盲目跟风。在生产环境使用新技术之前,要充分评估它的成熟度、性能、生态、团队学习成本等因素。如果React Native还不成熟,或者项目对性能要求极高,还是应该用原生开发。技术选型要根据项目需求来,不能因为新技术火就盲目使用。

总结

React Native的发布,是移动开发领域的一件大事。它用JavaScript写原生应用,兼顾了跨平台的开发效率和原生应用的性能体验。虽然还处于早期,有一些不成熟的地方,但它的潜力巨大,可能会改变移动开发的格局。

如果你是Web开发者,想做移动应用,React Native值得关注;如果你是移动开发者,想提升开发效率,React Native也值得学习。让我们拭目以待,看看React Native能走多远。