如图,可以把组件生命周期大致分为三个阶段:
第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化,其中getDefaultProps,getInitialState 在新版的Component中ES6语法继承时,直接复写方法会报异常,RN API要求我们props,state的初始化在Component的constructor函数中完成;
第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面;
第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作。
进入一个RN界面时,Component的声明周期函数大致流程如下:
1.constructor构造函数,从上一个界面传过来的数据props在作为constructor的参数,在constructor中做一些初始化的操作,如props,state等初始化;函数原型:void constructor(props)
2.componentWillMount,第一次绘制组件(render)前触发该生命周期函数;函数原型:void componentWillMount()
3.render绘制组件到界面上;函数原型:void render()
4.componentDidMount,第一次挥之组件(render)后触发该生命周期函数,触发该函数说明RN组件绘制已经完成了,虚拟DOM已经构建完成;从这个函数开始我们就可以和JS其他框架开始交互了,例如定时器,网络请求等操作。函数原型:void componentDidMount()
5.componentWillReceiveProps,当组件收到新的属性时,触发该函数。函数原型:void componentWillReceiveProps( object nextProps )
6.shouldComponentUpdate,当组件属性(props)或者状态(state)发生变化时,都会触发该函数。函数原型:boolean shouldComponentUpdate( object nextProps, object nextState );
若函数返回true,则继续触发componentWillUpdate,render,componentDidUpdate等方法;若函数返回false,则不做任何处理;
默认情况下,这个函数永远返回true用来保证数据变化的时候 UI 能够同步更新。在大型项目中,你可以自己重载这个函数,通过检查变化前后属性和状态,来决定 UI 是否需要更新,能有效提高应用性能。
7.componentWillUpdate,如果组件状态或者属性改变,并且上面的shouldComponentUpdate(object nextProps, object nextState)返回为true,则触发该方法,函数原型:void componentWillUpdate(object nextProps, object nextState),函数中参数实际上与shouldComponentUpdate中的参数一样,是同一个数据源;
需要特别注意的是,在这个函数里面,你就不能使用this.setState来修改状态,否则会循环调用该函数导致堆栈溢出。这个函数调用之后,就会把nextProps和nextState分别设置到this.props和this.state中。紧接着这个函数,就会调用render()来更新界面了。
8.componentDidUpdate,更新render结束后,则调用该方法,函数原型:void componentDidUpdate(object prevProps, object prevState);因为到这里已经完成了属性和状态的更新了,此函数的输入参数变成了prevProps和prevState。
9.componentWillUnmount,当组件要被从界面上移除的时候,就会调用componentWillUnmount(),函数原型:void componentWillUnmount();在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等。
疑问:
在实践过程中,我在页面销毁时,也会触发componentWillUpdate,render,componentDidUpdate,componentWillUnmount这样的一个流程,如果有明白的人希望可以解答下~