react-native入门(三)----组件的生命周期

话很少说，先上一个图(之前找的图，相对比较准确)

组件生命周期

调用顺序：

1.1 构造函数(constructor)

一、第一个语句必须是super(props)。

二、contructor将在任意一个RN组件被加载以前优先调用，而且只会调用一次。

三、该函数最大的做用是定义该组件当中须要使用的状态机变量 。

constructor(props) {
    super(props);
    this.myProperty1 = 'test';
    this.myProperty2 = true;
    this.state = {//定义状态机变量
    inputedNum: '',
    inputedPW: ''
    };
    this.updatePW = this.updatePW.bind(this);
    this.jumpToWaiting = this.jumpToWaiting.bind(this);
}
复制代码

1.2 componentWillMount

一、该函数原型为componentWillMount()

二、该函数整个过程当中只执行一次

三、该函数会在初始渲染前执行，即在render被调用以前调用

四、该函数执行后render就会调用。

五、若是在render中改变了某些状态机变量，那么RN不会执行渲染，而是等待该函数执行完毕后再次渲染。

六、子组件中一样拥有该方法，并会在父组件执行完毕后执行，该函数无返回值。

七、该函数适合于须要在本地读取一些数据用于显示，那么在render执行前调用是一个很好的时机。

1.3 render(渲染函数)

一、调用该方法，先对状态机变量与属性进行检查。

二、若是开发者不想渲染界面的话，能够在此处返回null或者false。

三、该方法适用于进行界面的JSX代码编写，所以不适合在此处对状态机变量进行修改或者访问服务器。

1.4 componentDidMount

一、该函数会在render渲染完毕以后调用，整个过程只执行一次。

二、该函数执行后，开发者就能够对界面上的组件或者子组件进行各类操做了。

三、该函数的应用场景适用于在移动端应用启动以后须要访问网络进行某些数据获取。

截止到此处，一个RN应用基本上启动运行了，接下来将处在运行中状态：

1.5 componentWillReceiveProps

一、该函数的原型为componentWillReceiveProps(nextProps);

二、当props(属性)发生改变或者接受到新的props时，该函数被调用，并接受一个输入参数，类型为Object，存放新的props，原先反生改变的旧的props仍然能够经过this.props访问。

三、该函数在RN初次被渲染的时候不会被调用。

四、若是在该函数当中对状态机变量进行了修改，RN不会当即渲染页面，而是会等待该方法执行完毕后一块儿渲染。

1.6 shouldComponentUpdate:（组件是否须要更新）

一、该函数原型 : boolean shouldComponentUpdate(nextProps,nextState);

二、当props(属性)或者状态(state)发生改变的时候会触发该函数，分别对应接收的两个参数，根据返回的布尔值来决定是否须要对页面进行从新渲染，若是不进行渲染，那么该方法后续的componentWillUpdate与componentDidUpdate都不会被执行。

三、该函数默认会返回true。

四、应用场景：能够在该函数中编写一些逻辑来判断渲染类型，来阻值一些没有必要的从新渲染，达到提高应用运行效率的目的。

1.7 componentWillUpdate

一、该方法原型与上一方法相同，在从新渲染前会调用该方法，为渲染进行准备工做。

二、该函数无返回值。

三、注意：在该方法中，不该该对状态机变量进行修改，要改变，也应该在1.1.5当中进行。

1.8 componentDidUpdate

该函数会在从新渲染render以后调用，传入上个方法必须的两个参数便可。

1.9 componentWillUnmount:

该方法会在RN卸载以前调用，无参无返回值，在该方法中，须要对该组件当中申请或者订阅的某些资源与消息进行释放。 父子组件渲染顺序，或者方法执行顺序，下面的是介绍，主要看图一目了然😂~

默认渲染流程

先执行父视图渲染前的操做constructor(), componentWillMount()，至渲染方法render(), 而后会开始初始化子视图，即执行子视图的constructor,componentWillMount(),紧接着render,而后，子视图渲染完毕后，开始执行componentDidMount(),渲染完毕子视图后渲染父视图，而后执行父视图的componentDidMount（）；再有子视图类推。

(注意：网络请求不要再willMount中请求，若是界面复杂，可能会在渲染完毕以前回调，推荐在componentDidMount中使用)

状态发生改变的流程

当属性发生变化的时候，相似上面，先收到消息componentWillReceiveProps，而后判断是否渲染shouldComponentUpdate，接着将要渲染componentDidUpdate,而后render，接下来开始准备渲染子视图，开始收到消息componentWillReceiveProps，而后判断是否渲染shouldComponentUpdate，接着将要渲染componentDidUpdate,而后render，最后回调子视图的componentDidUpdate(),再接着父视图的componentDidUpdate();

父子组件渲染流程：

父组件:componentWillMount->render->componentDidMount

父子组件：componentWillMount(父)->componentWillMount(子)->render->componentDidMount(子)->componentDidMount(父)