React Native 生命周期

1.getDefaultProps //在组件创建之前,会先调用 getDefaultProps(),这是全局调用一次,严格地来说,这不是组件的生命周期的一部分。在组件被创建并加载后,首先调用 getInitialState(),来初始化组件的状态。

2.​component​WillMount //准备加载组件,会调用componentWillMount(),调用时机:在组件创建,并初始化了状态之后,在第一次绘制render()之前;

3.componentDidMount //在组件第一次绘制之后,会调用componentDidMount(),通知组件已经加载完成;这个函数调用的时候,其虚拟DOM已经构建完成,你可以在这个函数开始获取其中的元素或者子组件了;需要注意的是,RN框架是先调用子组件的componentDidMount(),然后调用父组件的函数;从这个函数开始,就可以和JS其他框架交互了,例如设置计时setTimeout或者setInterval,或者发起网络请求;这个函数只会被调用一次,这个函数之后,就进入了稳定运行状态,等待事件触发;

​4.​componentWillReceiveProps //如果组件收到新的属性(props),就会调用componentWillReceiveProps(),输入参数nextProps是即将被设置的属性,旧的属性还是可以通过this.props来获取;在这个回调函数里面,你可以根据属性的变化,通过调用this.setState()来更新你的组件状态,这里调用更新状态是安全的,并不会触发额外的render()调用;
    示例如下:
    componentWillReceiveProps: function(nextProps) {
    ​    this.setState({
    ​        ​likesIncreasing: nextProps.likeCount > this.props.likeCount
        ​​});
    }​

5.shouldComponentUpdate //当组件接收到新的属性和状态改变的话,都会触发调用shouldComponentUpdate(...),输入参数nextProps和上面的componentWillReceiveProps函数一样,nextState表示组件即将更新的状态值;这个函数的返回值决定是否需要更新组件,如果true表示需要更新,继续走后面的更新流程;否则,则不更新,直接进入等待状态;默认情况下,这个函数永远返回true用来保证数据变化的时候UI能够同步更新;在大型项目中,你可以自己重载这个函数,通过检查变化前后属性和状态,来决定UI是否需要更新,能有效提高应用性能;

​6.componentWillUpdate //如果组件状态或者属性改变,并且上面的shouldComponentUpdate(...)返回为true,就会开始准备更新组件,并调用componentWillUpdate(),输入参数与shouldComponentUpdate一样,在这个回调中,可以做一些在更新界面之前要做的事情;需要特别注意的是,在这个函数里面,你就不能使用this.setState来修改状态;这个函数调用之后,就会把nextProps和nextState分别设置到this.props和this.state;紧接着这个函数就会调用render()来更新界面了;

7.componentDidUpdate //调用了render()更新完成界面之后,会调用componentDidUpdate()来得到通知,因为到这里已经完成了属性和状态的更新了,此函数的输入参数变成了prevProps和prevState;

8.​​​componentWillUnmount //当组件要被从界面上移除的时候,就会调用componentWillUnmount(),在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等;

 

原文地址:https://www.cnblogs.com/itgezhu/p/11399704.html