RN生命周期

网上看的博客,看着写的很好,想深入学RN的详细看下之后,再自己敲敲吧!有助于身体健康!

一个RN组件从它被加载,到最终被卸载会经历一个完整的生命周期。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。

ES6语法和之前的ES5语法有所变化,本文是根据ES6语法写的。

组件生命周期流程图

在ES5语法中,有getDefaultPropTypes这个函数,这个函数在组件被创建的时候调用一次,它的返回值成为了this.props的初始值

在ES6语法中,属性的类型和默认值声明不像ES5语法那样在组件定义内部声明,而是在组件定义的外部声明,所以生命周期函数没有了getDefaultPropsType了,但是声明DefaultPropTypes也是在组件创建的时候调用一次

constructor 构造函数

这个函数会在组件创建的时候调用一次。这个方法中可以通过this.state初始化状态机(ES5是通过getInitialState方法初始化的)。一般还在该方法中进行方法的bind(this)操作

 

componentWIllMount

在React Native组件的生命周期中,这个函数只会被执行一次。它在初始渲染(render)前被执行,当它执行完后,render函数会马上被react native框架调用执行.

如果在这个函数中通过setState函数修改状态变量,RN框架不会额外执行渲染

如果子组件也有componentWillMount函数,会在父组件之后调用

如果需要从本地存储中读取数据用于显示,这个函数是一个不错的选择

componentDidMount

在react native组件的生命周期中,这个函数只会被执行一次,它在初始渲染完成后会马上被调用.在这之后可以通过子组件的引用来访问,操作任何子组件.

如果RN组件的子组件也有componentDidMount函数,并会在父组件的componentDidMount函数之前被调用.

一般情况在这个方法中请求网络是一个不错的选择!

 

componentWillReceiveProps

这个函数的原型是:

componentWillReceiveProps(object nextProps)

在RN组件的初始渲染完成之后,当RN组件接收到新的props时,这个函数将被调用.参数就是新的props.

再次强调下,初次渲染不会调用该方法,是故意设计这种机制的

如果新的props会导致界面重新渲染,这个函数将在渲染前执行.如果函数中修改状态,框架不会立刻执行状态机改变的渲染而是等函数执行完之后一起渲染.

shouldComponentUpdate

这个函数的原型是:

boolean shouldComponentUpdate(obj nextProps,obj nextState)

RN组件的初始化渲染执行完成后,RN组件接收到新的state或者props时这个函数会调用.

函数返回一个布尔值,告诉RN组件是否重新渲染,如果false,不会渲染,相应的下面两个方法componentWIllUpdate和componentDidUpdate不会被调用.

通过这个函数阻止无必要的重新渲染,是提高RN应用程序性能的一大技巧.

componentWillUpdate

这个函数的原型是:

componentWillUpdate(obj nextProps,obj nextState)

初始渲染完成之后,重新渲染前会调用这个函数.但是这个函数不能通过this.setSatte再次改变状态机变量的值

componentDidUpdate

这个函数的原型是:

componentDidUpdate(obj nextProps,obj nextState)

RN组件初始完成之后,RN框架在重新渲染RN组件完成之后调用,参数是渲染前的props和state

componentWillUnMount

这个函数的原型是:

componentWillUnMount()

RN组件卸载前,这个函数被执行