React Native 调研报告

Facebook三月份开源了React Native iOS平台的框架，让移动开发人员和web开发者都各自兴奋了一把：native的移动开发者想的比较多的估计是Facebook的那句：“learn once, write everywhere”，而web开发者兴奋的估计是，不需要学习iOS那陌生的OC或者swift语言，用自己熟悉的javascript语言就可以开发原生的移动APP了。那么新推出的react native 能否承载的了两大阵营的开发者的期待了。本人及同事对react native做了一段时间的调研，心中渐渐有了自己的答案:

本文假定读者熟悉iOS APP开发，但对web前端开发的知识匮乏（如本人一样），在此基础上试图讲清楚react native 到底是什么；怎么用；以及当前是否值得使用。

1.React Native 是什么？

首先，react native 到底是个什么东东：它是Facebook开源的一套框架，其目的在于使用JavaScript语言编写iOS native的控件。更直白的讲就是，你用JS（JavaScript，下同）写的代码通过react-native lib桥接到Xcode中写的标准iOS程序中。在JS程序中，开发者可以使用react native定义的一套和cocoa touch中UI控件类等价的类，来完成UI层的开发工作，Xcode 编译器 会利用 react-native lib将JS写的代码编译成iOS原生的UI组件，下图展示了利用Xcode的视图调试功能展示了JS代码编译的结果，可以看到，这些JS语言最终确实是被编译成了UIView等对象，而不是H5界面经常使用的webview，有了这个认识之后，我们对react native就不在那么陌生了。

综上，你可以认为react native是一套能够让你使用Javascript而不是传统的Objective-C或者Swift，编写iOS APP 界面逻辑（MVC框架中的V层）的框架。使用过swift得同学甚至还会觉得JS和swift的语法上又不少雷同的地方（好吧，swift五仁月饼果然名不虚传），比如定义一个变量都是用关键字var。这套框架最大的亮点有俩：

1. 使用Javascript编写应用逻辑，保持APP的原生性，而不像HTML5那样对UI做出妥协，交互上有着优质的用户体验；

2. 基于状态驱动的界面更新机制，而不是传统意义上通过MVC的Controller来集中控制界面的更新工作，将UI和自定义的某一个或者某几个状态变量函数绑定，当这些变量发生变化时，这些状态变量便会驱动相应的UI模块重绘；

   2.React Native 的开发环境

   使用React Native 首先要搭建环境，使用React Native 进行iOS 开发，其环境如下图所示：
   

可以直接按照Facebook 官网搭建文档的指导来搭建React Native 开发环境，基本上没有坑，能够很迅速的完成。

除了运行环境的创建，还需要编写 JavaScript 代码的环境，Xcode 并非是最好的工具！Javascript 好用的编辑器网上很多，比如Sublime Text、atom等。

3. React Native 技术构成

3.1基本构成元素

React Native 的库同时包含了OC代码和javascript 代码，由这两种代码共同提供了一套用于构建界面UI系统的元素，包括但不限于：

• OC传统UI组件；
• OC上的手势识别及事件响应系统（如TouchableHighlight）；

• 基于流的布局系统；

  翻阅Facebook官网上的API文档，可以发现它基本上是实现了Cocoa Touch 框架上的最常用的UI控件：

  

基本上我们用JS写代码也是使用这些基本组件来构建我们的UI界面的。除此之外，你也可以在OC中，定制自己的模块，通过桥接的方式来在React Native 中使用。

3.2 React Native 中的事件响应系统

本地APP 和web 端的最大区别就是本地APP有着完美的事件响应系统，用户能够获得更好的用户体验。在React Native中也提供了一套事件响应系统，扒一扒React Native 的源码（在 ResponderEventPlugin.js 文件中），能够窥到React native事件响应的基本流程：

可见React native 的响应系统和Cocoa touch类似，一个view 如果想要对事件作出响应，它只需要实现函数：

• View.props.onStartShouldSetResponder: (evt) => true, - 当前view是否想作为touch 的响应者?
• View.props.onMoveShouldSetResponder: (evt) => true, - 当前view是否想作为move 事件 的响应者?

如果返回true，尝试要变成第一响应者，那么下面两个函数中的一个会被调用：

• View.props.onResponderGrant: (evt) => {} -当前view是第一响应者，在这里展示响应的交互效果（如背景色变化等）和事件触发的其他逻辑；

• View.props.onResponderReject: (evt) => {} - 其他view是第一响应者；

  考虑到响应系统的复杂性，React Native 在对事件响应封装的基础上实现了一些抽象类，如类似Cocoa Touch 中UIButton 的 TouchbleHighlight，你可以向使用view一样将它放到你希望有交互效果的地方。我们通过下图来看看如何使用TouchbleHighlight：

3.3 React native UI更新逻辑

在Cocoa Touch 系统中，UI更新是典型的MVC模式：Controller 通过数据的变更，来更新view层的展示，但在React Native 中却大相径庭：React Native 通过状态机的机制来驱动整个view层的更新。在开始介绍这一块之前不得不得先说一下React Native 的渲染方式：

从之前图片中给出的代码片段中读者也能窥出这种构建页面的方法和HTML语言很像：通过标签系统构建出分层的页面逻辑（父子关系），布局代码则采用CSS 的方式通过单独的代码来控制，这样显示的将业务逻辑和布局逻辑分开，使得整个代码层次逻辑更清晰。

在React Native中，整个UI都是一个component树：前面我们提到的ListView等UI组建都是一种具体的component，React Native通过将component树编译成一个virtual-DOM：虚拟文档对象模型，熟悉HTML的读者可能对于这个DOM非常熟悉，没错，就是那个DOM，整个的UI的关系可以通过这个virtual-DOM很清晰的体现，而且更重要的是，React Native的UI更新逻辑也是依赖于这个树来实现的：我们知道，笼统的讲，一个页面的更新，肯定是由数据的变更来驱动的，比如网络数据的更新或者是用户触摸导致的touch事件的发生（以及后续业务逻辑的跟进），那么如何将这些数据的变更和界面的刷新相绑定呢？如何知道哪一块的数据变更后需要