ReactNative调研结果

React Native相关调研总结

一.概要

React Native - 使用React开发世界一流的原生应用；

使用JavaScript和React(对JS有一定扩展)作为开发语言；

React Native专注于夸平台的开发效率，一次学习，跨平台应用（支持安卓和iOS）。

二.集成步骤

1.前往https://nodejs.org/en/下载node.js的pkg并进行安装

2.前往https://github.com/facebook/react-native下载最新版React Native(0.31)

3.解压并执行npm install命令

4.新建Xcode工程，在工程中按照需引入React Native的库(存在于Libraries目录)

5.完成React Native集成

三.对App体积的影响

1.包含模拟器和真机版本的静态库体积总共约30M

2.生成AppDemo只使用基本的类，ipa大小是1.7M

四.性能

官方宣称有媲美原生代码的性能，但是有网友提出React Native的性能并不理想，在页面层级到达5的时候，就要进行代码优化了。

五.动态升级方案

React Native本身并没有动态升级相关的管理类，但由于React Native使用Javascript进行构架，使得动态升级变的很方便；

关键步骤为：

1. 检查某页面对应JS是否有更新

2. 如果有更新，Native代码则进行下载

3. 下载完毕后，覆盖老版本JS

4. 重新从JS初始化RCTRootView，并加入到界面中

5. 完成升级

六.大模块升级开发成本

目前来看，React Native中提供基础的UI控件、动画、HTTP/HTTPS请求、socket、持久化等组件，理论上来讲一个模块或界面包含的所有内容，都可以使用React Native书写并完成升级。

相关的工作量包括：

1. 使用JS开发React Native
2. React Native与Native代码结合
3. 跨平台、性能等方面的测试
4. 自动升级功能的测试

七.对安卓的支持程度

React Native支持Android4.1及以上，iOS7.0及以上系统

八.使用难度

1.需要有JS语言基础

2.需要对React有基本概念，如JSX、components、state和props

3.对于一个JS工程师，门槛是比较低的

九.总结

 优势:

1. 一定程度的跨平台，一些组件在不同平台还是有着细微差异；

2. 提供了相对丰富的组件，包括UI控件、动画、HTTP/HTTPS请求、socket、持久化等等组件；

3. 有相对成熟的升级方案;

4. 对于APP体积影响不大。

 劣势:

1. React Native并不像JSPatch、WaxPatch等提供脚本语言到Native代码的一对一的映射关系，它只是提供了一系列组件，在构建复杂界面时会存在一些困难；

2. 性能方面不如Native代码，在多层页面叠加时可能会出现明显性能问题；

3. 需要学习JS语言。

十.参考资料

https://facebook.github.io/react-native/docs/tutorial.html

http://blog.csdn.net/linshaolie/article/details/50961955  React Native的动态更新方案

http://www.tuicool.com/articles/BJ7JbaY    用React Native实现动画

http://blog.csdn.net/u010046908/article/details/50916511  使用React Native进行HTTP请求

http://facebook.github.io/react-native/docs/integration-with-existing-apps.html 在已有native app中集成React Native页面

http://www.tuicool.com/articles/biUNriA    React Native性能相关