React Native介绍

作者: visen_Lu | 来源:发表于2018-11-08 16:48 被阅读33次

什么是React Native

React Native使你只使用JavaScript也能编写原生移动应用。它在设计原理上和React一致，通过声明式的组件机制来搭建丰富多彩的用户界面。

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

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          如果你喜欢在Web上使用React，那你也肯定会喜欢React Native.
        </Text>
        <Text>
          基本上就是用原生组件比如'View'和'Text'
          来代替web组件'div'和'span'。
        </Text>
      </View>
    );
  }
}

上面代码就是运用react native写的一个简单组件。

为什么要用React Native

1.跨平台兼容性

使用React Native，您可以编写一次代码并多次部署到Android和iOS操作系统。对于创业公司来说，这样可以节省成本，并为程序员腾出时间完成其他重要任务。

2、React Native卓越性能

除了React Native外跨平台框架还有：Cordova、AppCan、APICloud、Phonegap、Ionic、Dcloud等，这些框架基本都是在一个WebView上进行渲染，也就是说他们的性能最多就是原生app中WebView的性能。而ReactNaitve是采用JS桥接加Native桥接两个方式合并起来的。React Native产出的并不是“网页应用”，或者说“HTML5应用”，又或者“混合应用”。最终产品是一个真正的移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。

3、社区力量

有着Facebook的支撑，相信会发展的很好。目前github的星数已经快7 万了，还有很多开源的组件和框架可以使用。

4、学习成本低

用的是react的框架和css的布局，有前端开发经验降低了不少学习成本，也大大减少了代码量。但是对于iOS或者安卓开发者来说，刚开始接触的时候，得接受一些思想上的转变。

5、调试方便

ipa安装好之后，就不需要频繁编译了，只需要reload一下!
把js代码从云服务器下载下来就可以呈现改变代码后的效果。而且RN支持hotReload，在调试界面的时候非常方便，修改代码之后保存，界面就自动跟着变化，这一点在调试的时候很方便，不过有时候有点慢，需要reload。Chrome在线调试也可以打断点，看日志。

6、热更新

频繁的app升级会让用户很烦，毕竟繁多的业务迭代，每次都通过APP审核，也算是噩梦。而且苹果的审核也很麻烦。现在很多大型app都使用了RN，通过微软提供的codepush可以很简单的实现热更新。

安装环境

在Mac平台上开发React Native需要安装以下环境和工具：

Note.js
React Native Command Line Tools
XCode/AndroidStudio

1、安装Node.js

React Native开发需要用到Node.js环境。我们做React Native开发会经常性的和Node.js进行打交道，在Mac上安装 Node.js可以通过Homebrew，打开终端运行如下命名：

brew install node

安装完 Node 后建议设置 npm 镜像以加速后面的过程（如果能翻墙可以省略这步）：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

2、安装React Native命令行工具

Note.js安装成功之后，接下来我们就可以通过npm install来安装React Native命令行工具了。

打开终端，输入并执行下面命令即可完成安装：

npm install -g react-native-cli

3、安装iOS开发工具XCode/android开发工具android studio

我们可以在AppStore上搜索XCode并进行下载安装，安装步骤和安装普通的Mac应用是一样的，在这里就不重复了。

android studio可以去中文官网下载，速度更快而且不受防火墙影响。需要注意的是仅仅安装android studio是不够的，还需要安装开发android所需要的jdk和android sdk，这些在android studio官方网站的安装步骤中都有详细描述，与react native本文并无太大联系不再赘述.

4、还可以安装一些有用的命令行工具

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。

brew install watchman

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn

安装完 yarn 后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

5、创建自己第一个react-native项目

使用 React Native 命令行工具来创建一个名为"HelloReactNative"的新项目：

react-native init HelloReactNative

在你的项目目录中运行以下命令就可以编译运行：

cd HelloReactNative
// 运行IOS
react-native run-ios
// 运行android
react-native run-android

编译成功可以看到一个简单的demo:

demo

组件component

1、组件创建方式

常用的组件创建方式有两种，第一种是单纯一个JavaScript函数，第二种是创建一个JS类

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

    // 方式一：
    const MyComponent = (props) => (
        <View>
            <Text>MyComponent</Text>
        </View>
    );

    // 方式二：
    class MyClass extends Component {
      render() {
          return (
              <View>
                  <Text>MyClass</Text>
              </View>
          );
      }
    }

    export { MyClass };

    export default MyComponent;

以上两种方式创建的组件用法完全一样，区别在于方式一无法复写组件的声明周期，无法维护state，关于声明周期与state我们将在以后章节里面讲解。

2、组件和模块的导出和引入

1）export 命令

一个独立的文件就是一个模块。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。如上方的自定义组件中的

export { MyClass };

export default MyComponent;

export defalt命令在每个文件中只能存在一个，顾名思义是导出组件的默认输出。

接下来介绍export的几种写法

// 方式一：分别导出三个变量
export const firstName = 'Michael';
export const lastName = 'Jackson';
export const year = 1958;

// 方式二：用大括号统一导出（和方式一效果一样）
const firstName = 'Michael';
const lastName = 'Jackson';
const year = 1958;

export { firstName, lastName, year };

// 除了导出变量，还可以导出方法和类
export function logExport() {
  console.log('export');
}

class MyClass extends Component {
  render() {
      return (
          <View>
              <Text>MyClass</Text>
          </View>
      );
  }
}
export default MyClass;

// 使用as关键字给输出重新命名
export { firName as firstName };

2）import 命令

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

    // 非export default输出的，需要使用大括号
    // 和export相同也可以使用as 取别名
    import { firstName, MyComponent ,year as yearName } from './MyComponent';

    // 使用export default时，对应的import语句不需要使用大括号
    import MyClass from './MyComponent';

    // 本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。所以，下面的写法是有效的。
    import OtherName from './MyComponent';

通过 export 和import 我们就可以在app.js中使用自己创建的组件了

    ...

    import OtherName from './MyComponent';
    ...

    export default class App extends Component<Props> {

        render() {

            return (

              <View style={styles.container}>

                <Text style={styles.welcome}>Welcome to React Native!</Text>

                <Text style={styles.instructions}>To get started, edit App.js</Text>

                <Text style={styles.instructions}>{instructions}</Text>

                <OtherName />

              </View>
           );
        }
    }

组件生命周期

生命周期

如图，可以把组件生命周期大致分为三个阶段：

第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化，其中getDefaultProps,getInitialState 在新版的Component中ES6语法继承时，直接复写方法会报异常，RN API要求我们props，state的初始化在Component的constructor函数中完成；
第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；
第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。

进入一个RN界面时，Component的声明周期函数大致流程如下：

1.constructor构造函数，从上一个界面传过来的数据props在作为constructor的参数，在constructor中做一些初始化的操作，如props，state等初始化；函数原型：void constructor(props)
2.componentWillMount，第一次绘制组件(render)前触发该生命周期函数;函数原型：void componentWillMount()
3.render绘制组件到界面上；函数原型：void render()
4.componentDidMount，第一次挥之组件(render)后触发该生命周期函数，触发该函数说明RN组件绘制已经完成了，虚拟DOM已经构建完成；从这个函数开始我们就可以和JS其他框架开始交互了，例如定时器，网络请求等操作。函数原型：void componentDidMount()
5.componentWillReceiveProps，当组件收到新的属性时，触发该函数。函数原型：void componentWillReceiveProps( object nextProps )
6.shouldComponentUpdate，当组件属性（props）或者状态（state）发生变化时，都会触发该函数。函数原型：boolean shouldComponentUpdate( object nextProps, object nextState )；若函数返回true，则继续触发componentWillUpdate，render，componentDidUpdate等方法；若函数返回false，则不做任何处理；默认情况下，这个函数永远返回true用来保证数据变化的时候 UI 能够同步更新。在大型项目中，你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。
7.componentWillUpdate，如果组件状态或者属性改变，并且上面的shouldComponentUpdate(object nextProps, object nextState)返回为true，则触发该方法，函数原型：void componentWillUpdate(object nextProps, object nextState)，函数中参数实际上与shouldComponentUpdate中的参数一样，是同一个数据源；需要特别注意的是，在这个函数里面，你就不能使用this.setState来修改状态，否则会循环调用该函数导致堆栈溢出。这个函数调用之后，就会把nextProps和nextState分别设置到this.props和this.state中。紧接着这个函数，就会调用render()来更新界面了。
8.componentDidUpdate，更新render结束后，则调用该方法，函数原型：void componentDidUpdate(object prevProps, object prevState)；因为到这里已经完成了属性和状态的更新了，此函数的输入参数变成了prevProps和prevState。
9.componentWillUnmount，当组件要被从界面上移除的时候，就会调用componentWillUnmount()，函数原型：void componentWillUnmount();在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等。