龙源期刊网 http://www.qikan.com.cn
基于移动开发现状探讨React Native
作者：严新巧
来源：《电脑知识与技术》2016年第32期
摘要：由于移动互联网的热潮，很多从事传统行业的新人涌入移动互联网，这导致移动互联网移动开发者稀缺，开发产品以及创业的成本大大增加。 由于移动平台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。这种方式真正做到了开发一次，多次运行的目
龙源期刊网 http://www.qikan.com.cn
的，其采用了标准的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\解决方案，而是创新的提出了\， write anywhere\。即学习一次，可以在N个平台使用。
图1 React Native底层设计图
由图1可以看出应用自下向上依次是：
龙源期刊网 http://www.qikan.com.cn
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提供了一个主动调用原生函数机制，使得其成为可能。