《React Native移动开发实战》一一1.2 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。