ReactNative 概述

近期看了下React Native ，整理了下

简介

• 支持平台：Native App(IOS、Android)
• 开发语言：JSX、JavaScript、Coffee Script、Type Script
• IDE：Nuclide

此外，Facebook还开源了对应的IDE(Nuclide)。Nuclide具有能够开发基于Hack的Web应用、支持React和React Native开发、集成了构建工具Buck、集成了JavaScriot类型检查器Flow等特征

上线APP

• Facebook Groups IOS
• Facebook Ads Manager
• F8

主要特性

• 支持原生iOS组件

  通过使用React Native，开发者能够使用iOS环境下的标准组件（如UITabBar和UINavigationController）来开发原生应用，这就能够保证开发出来的应用在多个平台亦能保持始终如一的外观、风格，从而提高了应用产品的用户体验和品质；

• 支持异步执行

  JavaScript应用代码和原生平台之间的所有操作都是异步执行的，原生模块还可以使用额外的线程，从而利用React Native开发出来的应用性能比较高（运行流畅和反应快）。此外，开发者还能够在模拟器或者物理设备上运行应用的同时利用Chrome Developer Tools调试JavaScript代码；

• 触摸操作

  React Native实现了一个类似iOS平台下的响应系统，还提供了高级的组件如TouchableHighlight等；

• 引入了Flexbox布局模型和样式

  Flexbox布局模型有利于构建常见的UI布局，如stacked和nested boxes布局。React Native还支持常见的Web样式，如fontWeight、font-size等。样式表（StyleSheet）抽象提供了一种优化机制来声明组件所用到的所有样式和布局；

• 具有Polyfills功能

  Polyfills功能是的开发者编写单独应用的代码而不用担心其他浏览器原生是不是支持。React Native专注于改变试图（Views）代码编写的方式，开发者能够使用npm安装JavaScript Library，并将这些Library融入React Native，如 XMLHttpRequest、window.requestAnimationFrame等

• 较强的可扩展性

  设计React Native主要是为了使得开发者使用常规的原生视图组件扩展和模块就可以开发出一个完整的应用，开发者能够复用已经构建的任何应用或者组件，并且还能够引入自己喜爱的原生Library。
  ReactNative 组件

运行原理

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 Native通信机制详解

React Native 初探

态度

• 如何评价React Native(知乎)
• How does ReactJS Native compare with Titanium?(Quora)
• ReactNative in Twittter（Twrtter）

ReactNative VS Titanium

相同点:
* JS、XML 标签、类似CSS 样式、后台线程、桥接映射

不同点:
* Titanium 时间比较长、已有很多人趟坑、
* 异步线程、UI更新的批量处理效率较高

项目实战：

ReactNaitve Tutorial

Raywenderlich tutorial:Building Apps with JavaScript

React Native Has Landed

HackerNews-React-Native(APP)

React 入门实例教程

ReactNative.com

Hybrid APP

WebView app:

Adobe PhoneGap、Apache Cordova、AppCan、Trigger.io、IBM Worklight

相关应用：
* PhoneGap: Untappd、TripCase、Yoga+Travel
* AppCan: 求是网、富国富钱袋、鸡毛箭商城

优点：
* 全Web开发，减少开发人力成本；
* 统一UI交互
* 动态更新

致命缺点：
* 缓慢的渲染速度和难以驾驭的动画效果

项目实战：

怎么创建 PhoneGap 项目

iOS版PhoneGap原理分析

Compiled hybrid app

Titanium (JS)、Xamarin(C#)、RubyMotion(Ruby)、RoBoVM(Java)

相关应用：
* Titanium: 奇妙清单、Homes.com、ZipCar、、
* Xamarin: Rdio、Sqor Sports、RESAAS、、
* RubyMotion: Frontback、Jukely、Jimdo、、
* RoboVM:Offroad Kings、Wings of Rage

优点：
* 一种语言(JS、C#、Ruby、Java)支持所有平台(Native)
* 性能比较好 >>> PhoneGap

缺点：
* 开发受平台限制，新的API，必须要等到平台支持
* 维护成本巨高、取决于开源社区、、

实战项目：

• Build A Application in Titanium(Titanium)
• MoviesDemo in Github(Titanium)
• RubyMotion Samples (RubyMotion)

Native + WebView

• APICloud
• 微信、QQ、支付宝

优点：
* 最稳定的Hybrid App开发方式，交互层的效率上由Native的东西解决了，而且架构上基本就是在App内写网页，连App Store都是采用了该种方案；
* 开发时分工非常明确，底层的由iOS开发人员处理，上层的由Web前端开发人员处理；
* 有效的在线参数配置方式，以便于及时在线替换界面；

缺点：
* 团队至少需要三个工程师，一个是Web的，一个是iOS、Android的
* 运行效率的权衡权衡，多少界面采用Web来渲染，毕竟WebView的效率会相对降低

态度：
* 王巍：跨平台开发时代的 (再次) 到来？
* 李秉骏:Hybrid App开发实战