RN生命周期

概述

在Android开发中,每个View都有它自己的一个生命周期。同样在React Native中组件也有它自己的一个生命周期。（我们可以这样认为Android中的View跟React Native组件类似）。下面我们看下React Native的生命周期是怎样的。

如下：

我们也可以理解成三个阶段：

• 创建阶段：也就是生命周期中的getInitalState到componetDidMout这个阶段，在这阶段完成的组件的加载和一些数值的初始化。

• 刷新阶段：也就是第一个图中左下角虚线框内的生命周期，这个阶段是组件运行和交互阶段，通过改变属性(props)或者状态(state)来处理组件界面的交互和刷新。

• 销毁阶段：也就是生命周期中componetWillUnmpunt这个阶段，这个阶段是组件被销毁。

理解完上面生命周期执行顺序后，我们尝试写一个组件,并把每个生命周期并打印出来。

这里我做了个这样的操作初始化显示一个Text组件，然后按下去改变state中的一个值。

生命周期

getDefaultProps

在这个函数中，会去初始化一些默认的属性，一般都会把固定的内容放在这个过程中，并且全局只调用一次，属性内容无法再次修改。通过 this.props.属性 来获取属性值

在ES5中初始化属性是这样调用的

getDefaultProps() {
    return{
        ...
    }
}

在ES6中可以这样去写

//第一种
组件名称.defaultProps = {
    ...
}
//第二种
static defaultProps = {
    ...
}

getInitialState

在这里是对一些状态(State)进行初始化，跟getDefaultProps不同的是，state中的内容是可以修改的，可以通过 this.state.状态 来获取状态值，并且通过 this.setState 来修改状态值。如下

function(){
    this.setState({
        //状态：状态值
        ...
    });
}

注意

在ES5语法中是这样写getInitialState。

getInitialState(){
    return{
        ...
    };
}

在ES6中

state = {
    ...
}

当我们调用了this.setState,就是刷新组件的时候。

componentWillMount

在加载组件(render)前，回调用的一个生命周期函数。

render

这个方法就像Android中Activity中的onCreate方法，在这去加载布局。
注意的一个地方就是，return里面编写的是一个xml，并且只能有一个顶级元素
使用如下：

//正确写法
render() {
    return (
      <View style={styles.container}>
      </View>
    );
}
//错误写法
render() {
    return (
      <View style={styles.container}>
      </View>

      <View style={styles.container}>
      </View>
    );
}

componentDidMount

这个方法在render执行之后调用，一般会将网络请求、设置延时或者定时等操作，放在这里进行。

componentWillReceiveProps

这个方法是父元素修改组件属性(props)时，会调用的方法。

shouldComponentUpdate

在这方法是在调用this.setState或者父元素修改组件props时调用的方法，可以返回false或true来控制是否往下执行，如果返回false就不会刷新组件。

componentWillUpdate

这个方法类似componentWillMount，组件刷新前调用。执行完调用render刷新组件。

componentDidUpdate

组件刷新完成调用的方法。

componentWillUnmount

组件销毁时调用