移动开发者如何更好地学习 React Native？

作者 | 魔笛

责编 | 郭芮

2015年3月，Facebook正式发布react-native，只支持iOS平台；2015年9月，Facebook发布了React Native for Android，让这一技术正式成为跨平台开发框架。

我们团队是在2016年中期开始接触并使用react-native, 起初团队有很多反对声，其中：

iOS平台严格的审核制度，还有后来的JSPatch风波，担心有热更新的能力的react-native也会被禁用，还好react-native是以js.bundle为资源加载的沙盒热更新；
React Native的性能能达到上限问题。

当时选择react-native的几个重要因素：

跨平台：这可能是最重要的原因了，可以节省人力；
基于React框架开发，组建化，响应式思路，调试方式可以缩短开发周期（在开发者熟练使用的情况下），也可以调整前端开发资源；
热更新：APP当时修复BUG基本都是重新发版，周期比较长，热更新是解决这一个痛点是最好的选择；
新技术调研，扩展技术栈。

移动框架学习套路

每次接触一个新技术、新框架我们总是一头雾水。其实是有套路的，有经验的程序员会说这就是思想，下面主要从移动开发这几个方面调研：

计算机语言工具

环境搭建

UI绘制

基本布局方式

基本tab + navigator的APP框架搭建

网络请求(http, https, 上传，下载等)

缓存, 本地存储

图片

平台特性处理：例如推送，支付等等iOS，安卓不同的平台代码如何处理

调试工具：好的调试工具不但可以事半功倍，还可以给开发者愉悦的心情开发

静态代码检查（这个对于解释型的JS语言很重要）

Unit Test

CI集成方式

以上几个方面都研究明白了，整个react-native生产链路就调研完成了。

技术栈

针对上面的过程总结一下技术栈。

需要的语言&框架

JavaScript - ECMAScript6：React Native是以JavaScript作为语言工具开发；
React : 起源于 Facebook 的内部项目, 因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，在2013年5月开源. 由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

简单直观、符合习惯的（idiomatic）方式去编程，让代码更容易被理解，从而易于维护和不断演进。这正是React的设计哲学；
flex 布局 : 布局方式；
redux : JS 状态容器，提供可预测化的状态管理, 实现view & state 分离，开发体验超爽，而且体小精悍（只有2K）；
immutable.js :“Pete Hunt: Shared mutable state is the root of all evil（共享的可变状态是万恶之源）”, 有人说 Immutable 可以给 React 应用带来数十倍的提升，也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明, Facebook 工程师 Lee Byron 花费 3 年时间打造，与 React 同期出现；
Immutable 详解及 React 中实践（https://github.com/camsong/blog/issues/3）。

如何进行环境搭建

node.js RN的调试服务基于node服务器；
npm js包管理工具；
Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务；
react-native 环境搭建（https://facebook.github.io/react-native/docs/getting-started.html）。

如何进行UI绘制与布局

React Native 提供丰富的基础组件库，使用Flexbox布局规则。采用jsx更直观的表达用户界面结构。

import React, {Component} from 'react'
import {View, Text, Button, StyleSheet} from 'react-native'

export class Home extends Component {
  state = {
      number: 0
  }

  _increase() {
    const { number } = this.state
     this.setState({number: number + 1})
  }

  _decrease() {
    const { number } = this.state
     this.setState({number: number - 1})
  }

  render() {
    const { number } = this.state

    return (
      <View style={styles.container}>
        <Text>Home</Text>
        <Button title="加" onPress={this._increase.bind(this)}/> 
        <Button title="减" onPress={this._decrease.bind(this)}/> 
        <Text>{number}</Text>
      </View>
    )
  }
}

let styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
})

上例绘制一个简单的页面, View是最基础的UI组件，并且支持Flexbox布局，Text是用于显示文本的组件，Button从命名上就可以明确是按钮组件，StyleSheet 提供了一种类似 CSS 样式表的抽象。

调试

调试是开发流程中最重要的事情，下面两个工具给RN开发带来了超爽的体验

RN 调试工具：react-native-debugger

https://github.com/jhen0409/react-native-debugger
redux 开发扩展插件：redux-devtools-extension

https://github.com/zalmoxisus/redux-devtools-extension

静态代码检查

JavaScript是解释型语言，编译过程只有词法分析和语法分析，并没有词法检查，eslint对于JS的意义格外重要：

避免隐藏错误；
代码统一规范，提高可读性。

代码质量的保证

redux unit test：对于actions & reduce校验不可少（https://redux.js.org/docs/recipes/WritingTests.html）；
Jest：很棒的BDD（https://facebook.github.io/jest/docs/en/tutorial-react-native.html，PS：每当发现一个工具特别好用的时候，发现都是Facebook开源的）；
fetch-mock：异步单测不可少（http://www.wheresrhys.co.uk/fetch-mock/）。

CI 可以用以下工具

travis-ci：GitHub最流行的CI工具之一（https://travis-ci.org/）；
circle-ci：react-native GitHub库使用的CI工具（https://circleci.com/）；
gitlab-ci：目前我司用的是gitlab ci（https://about.gitlab.com/features/gitlab-ci-cd/）。

转场

tab-navigator框架：流畅的转场动画对于App体验很重要；
react-navigation：RN社区今后主推的方案是一个单独的导航库react-navigation（https://reactnavigation.org/），它的使用十分简单。性能上在原生线程上的Animated动画库，因而性能表现十分流畅，此外其动画形式和手势都非常便于定制。

状态管理

view与状态分离：Redux由Flux演变而来，但受Elm的启发，避开了Flux的复杂性。不管你有没有使用过它们，只需几分钟就能上手Redux。
单向数据流：应用中所有的state都以一个对象树的形式储存在一个单一的store中。惟一改变state的办法是触发action，一个描述发生什么的对象。为了描述action如何改变state树，你需要编写reducers。

如何做网络请求

使用fetch（https://facebook.github.io/react-native/docs/network）；

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

react-native-fetch-blob：更好的数据传输工具（https://github.com/wkh237/react-native-fetch-blob）。

如何本地存储

AsyncStorage：使用起来非常简单的Key-Value Coding, 返回Promise；

import { AsyncStorage } from 'react-native'
let kLoginInfo = '@login:info'

//存储
AsyncStorage.setItem(kLoginInfo, JSON.stringify(loginInfo))

//删除
AsyncStorage.removeItem(kLoginInfo)

//加载
AsyncStorage.getItem(kLoginInfo)