基于移动开发现状探讨React Native

严新巧

摘要：由于移动互联网的热潮，很多从事传统行业的新人涌入移动互联网，这导致移动互联网移动开发者稀缺，开发产品以及创业的成本大大增加。 由于移动平台IOS与Android开发的特性，导致开发速度慢，问题多。Android的开放性导致各平台众多，开发者苦不堪言，而基于Html5的解决方案又有自己的性能问题，一直未能解决开发效率。该文通过分析当前移动开发遇到的问题，对React Native 进行研究，从一个新的角度去解决这些问题。

关键词：移动互联网；混和开发；React Native

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）32-0076-02

1 研发开发现状

随着移动互联网的高速发展，移动开发越来越热门，目前市场上实现做一个移动端产品，客户端主要考虑两个平台，一个是Android平台，一个IOS平台，Android平台是Google开源的系统，IOS是苹果公司封闭的一套系统，由于这两者的语言以及平台的不同，开发一个应用，需要使用不同的语言，由不同的人员共同完成相同功能系统，而每个系统的更新，都很麻烦，都需要开发者重新上传，然后审核，用户才能更新，IOS的审核至少需要一周，所以对于产品运营，无疑会加大时间投入。这就如以前做桌面程序，开发者每开发一个应用程序都需要将应用开发程序上传到互联网上，提供给用户一个下载地址，用户需要自己下载安装，之后的更新需要用户自行更新，而不像现在互联网上的网站，只需输入一个网址就可以实现远程更新。

移动开发，特别是Android开发至今缺乏最佳实践，很多类和接口有多种实现方式，开发者都按自己熟悉或喜欢的模式来进行开发，导致想要读懂他人的代码很费劲，后续维护起来问题较大。由于Android的开源性，每个厂商都可以定制自己的Android系统，定义不同的分辨率，这对Android开发人员来说，要开发同一个产品必须要满足不同的Android版本以及众多的分辨率，开发效率必然大打折扣。

2 目前解决方案

由于原生开发会遇到不同的问题，所以现在普遍的解决方案是采用Html5方案，即用Html5、Css、Javascript来实现客户端的展示与后台数据交互。再通过WebView控件在每个平台上分别打包，由于各个资源都是放在云端，所以可以做到一次开发，处处使用。这种方案很多，包括比较出名的PhoneGap与APPCAN。这种方式真正做到了开发一次，多次运行的目的，其采用了标准的W3C标准，能直接让Web APP直接运行，而采用的语言也是主流的Html5，Javascript，CSS3，这使得以前做前端的工程师也能开发出Android，IOS的应用。

这种方案采用平台各自内置的WebView组件，具有以下两个特点：

1）WebView组件实质是移动设备内置的浏览器，正是由于这中特性，使Web能被打包成客户端，可方便调用Html5，CSS3。

2）PhoneGap，APPCan等方案针对不同平台的WebView做了扩展与封装，使WebView 这个组件变成可访问设备本地API的强大浏览器，开发人员在这些框架下可通过Javascript访问本地设备API。

但此方案也存在不足，一是性能不足，正常操作速度虽能满足，但是频繁操作则会导致响应变慢；二是稳定性以及占用资源方面存在着较大问题，这是由于WebView组件不能很好的释放内存，导致内存占用上升，甚至会引起应用的crash。

3 React Native 出现的根本原因

在过去，移动开发中的Web与Native之争基本以Native的胜利而告终，因为Web UI的性能无法与原生相提并论。即使目前手机性能有了巨大提升，但在UI交互等方面Web UI还是远远不如原生UI：Native 的原生控件有更好的体验；Native有更好的手势识别； Native有更合适的线程模型，例如图像解码、文本渲染仍无法多线程渲染，这影响了Web的流畅性。

这些正是直接导致React Native出现的根本原因，这也是为什么现在我们手機上的应用还是基于Native的居多，目前主流应用基本上没有一款是用Web来实现的，虽然这是未来的趋势，但是现在而言，硬件以及软件技术还达不到这一要求。

React Native 起源于Facebook的内部项目由于其设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单，所以被越来越多的人开发关注和使用。

4 React Native 简介

React Native 并不能真正的解决同一份代码，不同平台运行，由于Native平台上的用户体验不同，所以不提供“write once， run anywhere"解决方案，而是创新的提出了"Learn once， write anywhere"。即学习一次，可以在N个平台使用。

图1 React Native底层设计图

由图1可以看出应用自下向上依次是：

1）React：不同平台上编写基于React的代码，“Learn once， write anywhere"。这部分是使用Javascript与JSX语法写的，其中JSX可以看作Javascript的拓展。使用React，可以进行JSX与Javascript之间的切换。JSX在定义类似Html这种树形结构时，十分简单明了，更利于开发和维护。

2）Virtual DOM： 相对于Browser环境下的Dom而言，Virtual Dom 是Dom基于内存中的一种轻量极表达方式，可以通过不同的渲染引擎生成不同平台下的UI，Javascript和Native，它们之间通过Bridge通信。其是React Native的设计核心，所有的组件Virtual Dom都是存在于内存之中的一种数据结构，只有当它插入文档以后，都会变成真实的Dom。而所有的Dom的变动，都是先在虚拟的Dom上发生，然后再将实际发生的变动的部分，反应在真实的Dom上，这种算法叫做Dom diff，它可以极大提高网页的性能表现。

3）Web/Ios/Android： 现支持主流的客户端Web、Ios、Android。

整个React 的核心思想是：封装组件，各个组件维护自己的状态和UI，当状态变更，自动重新渲染整个组件。即将组件看成一个状态机，开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染UI。

从原理上来说，React Native 继承了 React.js 的虚拟 DOM 的思想，它是用虚拟的View来实现的。这个框架提供了一组 native 实现的 view （在 iOS 平台上是 RCT 开头的一系列类）。在写 JavaScript （更准确地说，对于 React Native，写的是带有 XML 的 JavaScript：JSX） 时，通过将虚拟 View 添加并绑定到注册的模块中，在 native 侧用 JavaScript 运行环境 （对于 iOS 来说也就是 JavaScriptCore） 执行编译并注入好的 JavaScript 代码，获取其对 UI 的调用，将其截取并桥接到 native 代码中进行对应部件的渲染。而在布局方面，依然是通过 CSS 来实现。

正是于此，React下面的两个特性使得它与其他框架不一样：①可以基于React Native使用Javascript编写应用逻辑，UI则可以保持全是原生。Html5的UI则不必做出妥协；②React引入了一种不同的、略显激进但具备高可用性的方案来构建用户界面，使得应用的UI可以简单通过一个基于应用目前状态的函数来表达。

而正是这种组件化思想与设计可以帮助开发者封装自己的代码，使得开发更加有效率。

5 React Native 交互原理

由上文可以看出，React Native的前端语言是JSX，由它去负责前端内容的展示，但是有些内容React Native本身是不能实现的，特别是一些第三方的接口，其没有提供React Native接口，这就需要JSX与原生开发进行交互，JSX提供了一个主动调用原生函数机制，使得其成为可能。

由图2可以看出JSX发起通知的过程就是调用原生模块的函数，JSX和原生模块是在两个线程里面，JSX只是发起通知，并不会等待原生模块执行完函数。JSX调用原生模块的函数式可以传递参数的变量类型，与原生变量类型是一一对应的，这如同Java通过JNI调用C一样。

JSX与原生的View进行交互：React Native 呈现View的方式就是通过各种各样的标签，使用原生View其就是把原生的View包装成一个标签，而View本身的函数，可以在JSX层去直接调用它们，如图4。

因而在JSX中调用View的原理如图5：

上面介绍了JSX是如何与原生的函数以及原生的View进行交互，可以看出JSX始终是执行者，通过这种方式也就解释了React Native的：Learn once， write anywhere。

6 React Native 优势与劣势

React Native 从Native开发来说，相当于重新发明了一个浏览器并且套了一个React的壳，从Web开发角度来说，就是把原生的React的后端换成了Native code来实现。因而它的优势与劣势，就要相对于以前的这两种框架来区分。

优势相对于Webapp：

1）不用WebView，彻底摆脱了WebView的交互和性能问题。

2）有较强的扩展性，这是因为Native端提供的是基本控件，Js可以自由组合使用。

3）可以使用Native原生的动画，这点用Web非常困难。

优势相对于Native app：

1）可以通过更新远端Js，直接更新App。

2）组件化思想可以帮助开发者增加效率。

而它的劣势也是显而易见的：

1）扩展性不如Web，更不如Native方案。

2）从Native 到 Web，要做很多概念转换，势必造成双方都要妥协，这导致了React Native的门槛相对较高，学习成本较大。

3）不够成熟与完善，由于React Native发展时间比较短，在使用过程中遇到问题不如原生开发，能比较快速的找到解决方案，这需要用户自己花费较多时间解决问题。

7 总结

React Native是以把React编程模式的能力带到移动开发来作为主要目标。它的目标不是跨平台一次编写到处执行，而是一次学习跨平台开发。

但对Web前端来说，React 是一个全新的领域，需要我们来完成配套的基础设施，就如中国的淘宝已经上线相关应用，需要我们广大开发者与教育者来共同推进业界进步。

Web是未来，Native是当下，而React Native是在未来与当下之间。

参考文献：

[1] FaceBook office.A JavaScript library for building user interfaces | React [EB/OL].[2013-05].http：//facebook.github.io/react/.

[2] Sebastian Markb?ge. React （Virtual） DOM Terminology[EB].[2014-06].

[3] Jack Callister. The React Quick Start Guide[EB/OL]. [2015-01]. http：//www.jackcallister.com/2015/01/05/the-react-quick-start-guide.html.

[4] 阮一峰. React 入門实例教程[EB/OL].[2015-03-31]. http：//www.ruanyifeng.com/blog/2015/03/react.html.