React Native学习笔记（二）

2018-01-20

本文介绍了React基本语法概念和React Native环境搭建及示例。

《春夜喜雨》
好雨知时节，当春乃发生。
随风潜入夜，润物细无声。
野径云俱黑，江船火独明。
晓看红湿处，花重锦官城。
—唐，杜甫

React基本语法及概念

React（有时叫React.js或ReactJS）是一个为数据提供渲染为HTML视图的开源JavaScript 库 —— 维基百科。React 的核心思想是：封装组件。

环境搭建

Homebrew是Mac OSX上的软件包管理工具，能在Mac中方便的安装软件或者卸载软件。安装Homebrew：

1	ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Node.js是基于JavaScript语言和 Chrome V8 引擎的开源Web服务器项目。简单的说Node.js 就是运行在服务端的JavaScript。安装Node.js时会顺带安装一个名为 npm 的包管理工具，用来管理模块依赖。安装Node.js：

1	brew install node

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

1	npm install -g yarn react-native-cli

安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。

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

1	brew install watchman

创建一个React Native工程，并运行到Android设备上：

react-native init RNTest
cd RNTest
npm insatll //根据配置文件安装依赖module
react-native run-android

图工程结构

可以通过摇一摇调出开发菜单，或者使用命令行：

1	adb shell input keyevent 82

组件

先来看一个简单的示例：

import React, { Component } from 'react';
import { StyleSheet,View,Text } from 'react-native';
export default class HelloWorldApp extends Component {

  render() {
    return (
      <View style={styles.parent}>
        <Text style={styles.hello}>Hello world!</Text>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  parent: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: "#F2F2F2"
  },
  hello: {
    fontSize:30,
    textAlign: 'center',
    color: '#FF0000'
  }

});

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

上面的代码定义了一个名为 HelloWorldApp 的新的组件（Component），StyleSheet用于控制组件样式，并且使用了名为 AppRegistry 的内置模块进行了“注册”操作。你在编写React Native应用时，肯定会写出很多新的组件。而一个App的最终界面，其实也就是各式各样的组件的组合。组件本身结构可以非常简单——唯一必须的就是在 render 方法中返回一些用于渲染结构的JSX语句。
AppRegistry 模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。

JSX

React 使用 JSX 来替代常规的 JavaScript。JSX是一种在 JavaScript 中嵌入XML结构的语法。

Virtual DOM

当组件状态 state 有更改的时候，React 会自动调用组件的 render 方法重新渲染整个组件的 UI。当然如果真的这样大面积的操作 DOM，性能会是一个很大的问题，所以 React 实现了一个Virtual DOM，组件 DOM 结构就是映射到这个 Virtual DOM 上，React 在这个 Virtual DOM 上实现了一个 diff 算法，当要重新渲染组件的时候，会通过 diff寻找到要变更的 DOM 节点，再把这个修改更新到浏览器实际的 DOM 节点上，所以实际上不是真的渲染整个 DOM 树。这个 Virtual DOM 是一个纯粹的 JS 数据结构，所以性能会比原生 DOM 快很多。

Data Flow

Data Flow 只是一种应用架构的方式，比如数据如何存放，如何更改数据，如何通知数据更改等等，所以它不是 React 提供的额外的什么新功能，可以看成是使用React 构建大型应用的一种最佳实践。单向数据绑定是 React 推崇的一种应用架构的方式。当应用足够复杂时才能体会到它的好处，虽然在一般应用场景下你可能不会意识到它的存在，也不会影响你开始使用 React，你只要先知道有这么个概念。

state

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后 React 会自动根据新的 state 重新渲染用户界面。

props

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据，而子组件只能通过 props 来传递数据。

介绍完以上概念，我们来看一个例子：

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

class CountText extends Component {
    render() {
        return (<Text>{this.props.count}</Text>);
    }
}

export default class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
    }

    pressButton = () => {
        this.setState(previousState => {
            return {count:previousState.count+1}
        })
    };


    render() {
        return (
            <View style={styles.container}>
                <Button onPress={this.pressButton}
                        title="Click Me"
                        color="#841584"/>
                <CountText style={styles.countText} count={this.state.count} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    countText: {
        fontSize: 20,
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

图示例效果

在这个例子中，我们自定义了一个组件CountText，用于渲染 count 属性值。在App组件中定义了 state 对象，包含一个 count 属性。App渲染了一个Button及自定义组件CountText，当点击按钮时调用 this.setState 更新state的值，CountText组件就会被重新渲染。在示例中，我们使用 props 给子组件传递数据，子组件通过 this.props.count 获取，使用 state 更新 count 值，通过 this.state.count 传递给子组件的 count 属性。

组件生命周期

每一个组件都有几个你可以重写以让代码在处理环节的特定时期运行的“生命周期方法”。方法中带有前缀 will 的在特定环节之前被调用，而带有前缀 did 的方法则会在特定环节之后被调用。

这些方法会在组件实例被创建和插入DOM中时被调用：

constructor()
componentWillMount()
render()
componentDidMount()

属性或状态的改变会触发一次更新。当一个组件在被重渲时，这些方法将会被调用：

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

当一个组件被从DOM中移除时，该方法被调用：

componentWillUnmount()

查看完整源码：https://github.com/yuweiguocn/RNTest

于卫国