get_product_contenthtml
第1章 为什么要学习React Native
无论读者是移动平台开发者，还是Web前端开发者，想必对现在“大红大紫”的React Native都有所耳闻。那么，除了“乘着Facebook这棵大树好乘凉”的优势之外，React Native到底是何方“神圣”，有什么令大家“趋之若鹜”的优点呢？下面带着这样的好奇，来随本书一探究竟吧！
本章主要内容有：
? React Native与React.js的对比。
? 为什么说React Native是跨平台的。
? React Native应用的结构。
? React Native的特点。
? React Native的环境搭建。
? 创建个React Native应用。
1.1 看透React Native
React Native（http://facebook.github.io/react-native/）次进入公众的视野是在2015年1月的React.js Conf（http://conf.reactjs. org/）上，随后，同年5月份，Facebook在F8 Conference（https://www. fbf8.com/）上正式宣布：React Native项目（如图1.1所示）在Github开源。结果一天之内，就收获了5000多颗星，受关注程度可见一斑！
?小知识：React.js Conf是指Facebook的React开发者大会，F8 Conference是指Facebook的开发者大会，Github是全球的软件项目托管平台，也被戏称为“人类的代码仓库”。
1.1.1 React Native与React.js
想者在还没弄清React Native之前，又发现了一个“新朋友”React.js（下文简称React），那到底什么是React呢？它和React Native又是什么关系呢？
先来看看Facebook官方（https://code.facebook.com/projects/176988925806765/react/）对React的定义：
React is a JavaScript library for building user interfaces
从上述官方的定义可以知道：React是一个用于前端UI开发的JavaScript库。和其他类似的前端框架相比，例如，老牌的Backbone（http://backbonejs.org/）、Google推出的Angular（https://angularjs.org/）和以轻量级著称的Vue.js（http://cn.vuejs.org/），React的不同是提出了Virtual DOM（即虚拟DOM）的设计，可以大大提升页面渲染的效率。
?小知识：移动平台开发很好理解，即移动平台上（例如Apple的iOS平台，Google的Android平台）的软件开发，开发语言和技术主要有Objective C、Swift及Java等。而前端开发是相对于后端（又称服务器端）开发而言的，前端主要负责开发通过浏览器和用户交互的部分，开发语言和技术主要有HTML、CSS及JavaScript等。
但是，Facebook不仅仅满足于React对前端开发技术的革新，又将React的设计移植到原生开发中，从而诞生了React Native结合的产物，即React Native。
虽然，React Native刚开始只支持iOS App开发，但是从2015年9月起，React Native也支持Android App开发，而且随着微软、三星等“IT大佬”的加入，React Native还将支持更多的移动平台，例如，Sansung的Tizen平台（https://www.tizen.org/）、Microsoft的Window Phone（http://microsoft.github.io/code-push/articles/ReactNativeWindows.html）。
所以，简单来说：
? React Native和React使用了相同的开发语言JavaScript和相同的设计理念React。
? React Native和React运行的环境和平台却是完全不同的，React Native是基于移动平台（如iOS、Android等），而React是基于浏览器。
?提示：国内网络环境下访问React Native官网（http://facebook.github.io/react-native/）可能较慢，读者可以访问国内的中文资源网站，例如React Native 中文网（http://reactnative.cn/），或者自行搜索加快React Native官网访问速度的办法。
1.1.2 React Native的跨平台
简单了解了React Native的由来之后，读者或许会有这样的疑问，开发移动平台App使用原生开发平台和语言就好了，为什么要出现使用React Native来开发移动平台App的技术呢？换句话说，React Native到底可以解决什么问题呢？
在进一步讨论之前，笔者觉得有必要明确一下什么是原生应用和跨平台应用。
1．原生应用
所谓的原生应用是指：使用原生开发语言、工具和平台开发的应用。原生应用开发的优势在于拥有较高的平台成熟度，包括平台的稳定性、运行时的性能及完善的生态。
?小知识：所谓的“生态”应该算是比较抽象的概念，开发平台的生态圈包含了很多方面，从硬件上芯片和各种电子元器件的生产、供应，到软件上所使用的语言、开发工具及第三方开源库的数量质量，以及人的方面，如开发者的数量、水平等因素。
但是，原生应用开发也不是没有任何缺点，那就是开发成本较高，导致开发效率相对较低。例如，当一个产品需要支持多种类型的移动终端时，就需要熟悉多个原生平台开发的工程师。
2．跨平台应用
为了解决产品满足多个平台的需求，就有了所谓的跨平台应用开发。根据实现跨平台方案的不同，也就有了以下几种常见的跨平台解决方案。
? 混合应用开发：在移动浏览器中嵌入HTML页面来开发移动应用，代表的有Apache Cordova（http://cordova.apache.org/），以及基于Apache Cordova衍生的Inoic（http://ionicframework.com/）等，如图1.2所示。
? 跨平台的语言：例如，基于.NET和C#的Xamarin（https://www.xamarin.com/），以及基于Ruby的RubyMotion（http://www.rubymotion.com/cn/），如图1.3所示。
图1.2 Apache Cordova LOGO图1.3 Xamarin LOGO
? React Native：使用的是Web开发语言（JavaScript）和环境（Node.js）。除了本书介绍的React Native之外，类似的技术方案还有NativeScript（http://www. telerik.com/nativescript）、Weex（http://weex-project.io/）等，如图1.4所示。
图1.4 Weex LOGO
?提示：想要了解关于更多React Native的架构和原理，可以参考1.1.3节。
1.1.3 解剖React Native应用的结构
在了解完这么多关于React Native的故事和优势之后，让我们走近React Native，来进一步了解React Native的原理和架构。
React Native应用的整体结构如图1.5所示。
图1.5 React Native应用的整体结构
通过之前的介绍和图1.5可以看出：React Native应用开发使用的是与React相同的开发语言JavaScript和设计思想React，而底层仍然是基于原生平台的。这样，不同平台的适配就交由React Native平台去处理，而开发者只需要专注于React Native平台应用开发本身，体现出的优势如下。
? 应用层的开发变得简单、高效和跨平台。
? 应用稳定性、运行时的性能和原生平台接近。
? 在理解React Native原理之后，开发者也可以根据实际的产品需求开发自己的React Native组件，以复用已有原生平台的大量优秀组件。
1.2 React Native的特点
那么，作为跨平台应用开发的“新贵”，React Native相比其他跨平台技术到底有哪些优势呢？
1.2.1 其一：Learn Once, Write Anywhere
这句话是React Native官网（http://facebook.github.io/react-native/）对React Native的概述，简单明了地概括了React Native的特点和优点。
只需要学习React Native这一种开发方式（包括平台、语言和开发环境等）就可以开发多个不同平台的App。
这句话简单来说就是Learn Once, Write Anywhere，这也是React Native的宣传广告，如图1.6所示。
图1.6 Learn Once, Write Anythere宣传广告
?小知识：除了React Native提出的Learn Once，Write Anywhere的口号，Java语言也提出过类似的口号Write Once，Run Anywhere，两者看起来类似，但其实是完全不同的。React Native就像上面介绍的，降低的是学习成本，针对不同平台可能还需要单独开发；而Java语言的意思是只需要开发一次，就可以成功运行在不同的平台和设备上。
目前，React Native对iOS、Android平台的支持已经非常好了，在不远的将来，应该还会支持Windows、Tizen等更多的移动平台。
而且，React Native的大多数组件也是可以在多个平台复用的，所以学习了React Native开发之后，完全可以胜任多个平台的开发任务且不需要很高的额外学习成本，大大降低了开发成本。
1.2.2 其二：简单易学的开发语言
React Native开发是基于JavaScript语言的，虽然JavaScript也是一门灵活、强大且复杂的语言，但是对于新人来说，上手速度相比Objective-C或Java等还是要快得多。而且，由于JavaScript严格模式的使用以及ECMAScript 2015（下文简称ES 6）标准的推出，JavaScript被人诟病的各种语言问题也大大减少。
不仅如此，Facebook为了进一步提高代码可读性和开发效率，还扩展出了JSX语法，即一种可以在JavaScript代码中直接书写HTML标签的语法糖。
例如，一个典型的React Native项目的JavaScript代码看起来是这样的：
01 export default class ch02 extends Component { // 每个页面可以理解成一个组件
02 render() { // 渲染页面的函数
03 return (
04 <View style={styles.container}> // 页面根View
05 <Text style={styles.welcome}>
06 Welcome to React Native!
07 </Text>
08 <Text style={styles.instructions}>
09 To get started, edit index.ios.js
10 </Text>
11 <Text style={styles.instructions}>
12 Press Cmd R to reload,{'\n'}
13 Cmd D or shake for dev menu
14 </Text>
15 </View>
16 );
17 }
16 }
除了开发语言使用JavaScript之外，在React Native开发中，样式和布局的技术相比原生平台也是比较简单的。
React Native的样式使用了类似CSS的规范，只是根据JavaScript的语法要求将命名方式改成了“驼峰命名法”，例如，Web开发中的background-color要写成backgroundColor。
React Native的布局使用了Flexbox布局方式，Flexbox是Flexible Box的缩写，又称“弹性盒子布局”。Flexbox布局不仅使用简单，的优势还在于提供了自适应显示设备和屏幕大小的能力，从而可以很好解决iOS、Android等屏幕适配问题。
例如，一个典型的React Native项目中的样式和布局代码看起来是这样的：
01 const styles = StyleSheet.create({
02 container: { // 页面根View的样式
03 flex: 1,
04 justifyContent: 'center',
05 alignItems: 'center',
06 backgroundColor: '#F5FCFF'
07 },
08 welcome: { // “欢迎”文本的样式
09 fontSize: 20,
10 textAlign: 'center',
12 margin: 10
12 },
13 instructions: { // “说明”文本的样式
14 textAlign: 'center',
15 color: '#333333',
16 marginBottom: 5
17 }
18 });
?提示：关于JSX和Flexbox布局的更多介绍，可以参考本书第2章的内容。
1.2.3 其三：接近原生应用的性能和体验
对于React Native上述的两个优点，混合应用开发的方式其实也都有，但是，混合应用开发的方式在实际开发中却存在性能和体验不佳的先天不足（其原理是在移动浏览器里嵌入HTML页面，导致原生平台的性能优势无法充分发挥出来）。
混合应用开发方式从PhoneGap发展到Apache Cordova，而且衍生的Ionic也都在不断强调和优化性能，但是现阶段，在移动浏览器中嵌入HTML页面的运行效率，仍然无法和原生应用相媲美。
而React Native虽然使用的是类似混合应用开发的语言，但是其实现机制却完全不同：React Native的底层仍然是基于原生平台的！所以，React Native在性能和体验上与原生应用几乎没有太大差别，用户很难区分所使用的App到底是原生开发的还是React Native开发的。
1.2.4 其四：完善的生态系统
生态系统是衡量一个开发平台成熟度的重要标志，所以开发者在选择任何开发平台时，很有必要了解该平台的生态状况。
React Native有着非常庞大的开发者社区和很高的活跃度，这点从React Native在Github上线天5000多颗星，截至2017年1月4日40000多颗星、9000多次Fork以及9000多次提交就可以看出，如图1.7所示。
图1.7 React Native项目在Github上的关注度和贡献
Google Trends（https://www.google.com/trends/explore?date=today%2012-m&q=ios%20 development,android%20development,react%20native）也反映出了React Native开发的趋势和热度，如图1.8所示。
图1.8 Google Trends上React Native的趋势和热度
同时，Facebook也在大力支持和推广React Native，并推出了官方的调试工具React Developer Tools（https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgof adopljbjfkapdkoienihi）和开发工具Nuclide（https://nuclide.io/），如图1.9所示。
图1.9 Facebook推出的React Native开发工具Nuclide
另外，网络上还有大量优秀的开源项目可供学习和参考，例如：
? React Native开源库检索网站JS.coach（https://js.coach/react-native）。
? React Native学习资源汇总项目awesome-react-native（https://github.com/jondot/ awesome-react-native）。
总之，在学习和开发React Native的路上，不仅有本书可以参考，还有非常多的资源和帮助，借用一首歌名来说：You will never walk alone。
