ReactNative基础—State and Lifecycle

一、简介

上篇文章中我们一起学习了Components and Props，知道了ReactNative中两个基本概念：组件和属性，并且知道了两者之间的关系和使用方法与特性。这篇文章我们一起来认识一下ReactNative中的第二种数据类型：State。
State数据类型应用范围在组件内部，并且可依据需求实时变化并改变UI。

二、基础概念

• state是私有的并且完全被组件所控制的
• this.state中的数据只能用于render视觉呈现，并且只能在构造方法中定义
• 改变state状态时使用setState方法
• 和props一样，state的更新可能是异步的，因此不可用于计算下一个状态
• 如有多个state值，使用setState方法更新时需要单独明确指定更新

三、应用

下面通过一个时钟的例子来体会一下state的应用场景和使用方法

1. 先定义好需要的类

// 导入需要使用的组件import React, { Component } from 'react';import { StyleSheet, Text, View } from 'react-native';// 创建输出类export default class ClockTick extends Component {    // 呈现UI视图    render() {        return(            <View>                // TODO 加载UI布局            </View>        );    }}

2. 引入生命周期相关概念

• 构造方法 constructor [props参数和super(props)不可缺少]

// ClockTick类中添加构造方法constructor(props) {    super(props);    // 定义时间state    this.state = {        date: new Date()    }}

• 创建时钟方法

// 时钟运转方法（这是ES6语法的定义方式，后面会讲到），调用该方法会改变date的值tick = () => {    this.setState({        date: new Date()    });}

• 组件装备完毕之后的生命周期方法 componentDidMount
• 延伸知识点，this.state只能定义用于呈现UI的数据状态值，非UI呈现数据可使用this.propsName方式定义

// UI组件加载完毕后，开始调用计时器componentDidMount() {    // 创建计时器，setInterval方法返回计时器ID，存储在this.timeID中    this.timeID = setInterval(       () => this.tick(),       1000    );}

• 组件将要卸载之前的生命周期方法 componentWillUnmount

componentWillUnmont() {    // 解除定时器    clearInterval(this.timeID);}

• render方法调用

render() {    return(        <View>            {this.state.date.getSeconds()}        </View>    );}

3. 完整代码

// 导入需要使用的组件import React, { Component } from 'react';import { StyleSheet, Text, View } from 'react-native';// 创建输出类export default class ClockTick extends Component {    constructor(props) {        super(props);        this.state = {            date: new Date()        };    }    // 时钟运转    tick() {        this.setState({            date: new Date()        });    }    componentDidMount() {        // 创建定时器        this.timeID = setInterval(            () => this.tick(),            1000        );    }    componentWillUnmount() {        // 解除定时器        clearInterval(this.timeID);    }    // 呈现UI视图    render() {        return(            <View>                // TODO 加载UI布局                <Text>{this.state.date.getSeconds()}</Text>            </View>        );    }}

四、总结

到这里ReactNative两种控制UI的数据类型已经给大家介绍完了。props只可读不可修改，用于组件之间的数据通信；state只应用于单一组件内部，属于私有的，可根据业务需求随时修改UI。关于state的修改这里再补充一点：多个state单一需改或者同时修改的方式

// 同时定义多个statethis.state = {   state_one: 'one'   ,state_two: 'two'}// 只需改一个statethis.setState({    state_one: 'state_one'});this.setState({    state_two: 'state_two'});// 需要同时需改多个statethis.setState({    state_one: 'state_one'    ,state_two: 'state_two'});