美文网首页工作生活
React Native组件生命周期

React Native组件生命周期

作者: 有腹肌的豌豆Z | 来源:发表于2019-07-01 12:50 被阅读0次

    构造函数(constructor)

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

    2、contructor将在任意一个RN组件被加载之前优先调用,并且只会调用一次。

    3、该函数最大的作用是定义该组件当中需要使用的状态机变量 。

    constructor(props) {

    super(props);

    this.myProperty1 ='test';

    this.myProperty2 =true;

    this.state = {

    //定义状态机变量inputedNum:'',

    inputedPW:''

    };

    }



    componentWillMount

    1、该函数原型为componentWillMount()

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

    3、该函数会在初始渲染前执行,即在render被调用之前调用

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

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

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

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


    render(渲染函数)

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

    2、如果开发者不想渲染界面的话,可以在此处返回null或者false。

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


    componentDidMount

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

    2、该函数执行后,开发者就可以对界面上的组件或者子组件进行各种操作了。

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

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


    componentWillReceiveProps

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

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

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

    4、如果在该函数当中对状态机变量进行了修改,RN不会立即渲染页面,而是会等待该方法执行完毕后一起渲染。


    shouldComponentUpdate:(组件是否需要更新)

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

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

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

    4、应用场景:可以在该函数中编写一些逻辑来判断渲染类型,来阻值一些没有必要的重新渲染,达到提升应用运行效率的目的。


    componentWillUpdate

    1、该方法原型与上一方法相同,在重新渲染前会调用该方法,为渲染进行准备工作。

    2、该函数无返回值。

    3、注意:在该方法中,不应该对状态机变量进行修改,要改变,也应该在componentWillReceiveProps当中进行。


    componentDidUpdate

    该函数会在重新渲染render之后调用,传入上个方法必须的两个参数即可。


    componentWillUnmount

    该方法会在RN卸载之前调用,无参无返回值,在该方法中,需要对该组件当中申请或者订阅的某些资源与消息进行释放。


    Thank you for sharing your talent as a free resource online.

    相关文章

      网友评论

        本文标题:React Native组件生命周期

        本文链接:https://www.haomeiwen.com/subject/uikgcctx.html