在聊组件的生命周期之前,我先告诉大家组件分为三种状态:绘制(装载)、更新、卸载
再知道组件三种状态后我们可以更好的了解每种状态的任务和职责。
【装载】
getDefaultProps
用来初始化组件的属性,组件的生命周期中只会调用一次。
getInitialState
用来初始化组件的状态,和getDefaultProps一样只会调用一次。
在ES5和ES6中有区别,在ES6中将getDefaultProps和getInitialState合并成了一个constructor(构造函数),将组件的属性和状态用同一个构造函数来初始化。
componentWillMount
字面意思是组件将要被加载,在组件装载中除了render函数会多次调用以外,其它函数都只会调用一次。
render
渲染函数,用来绘制界面。
componentDidMount
组件已经被加载,一般用来请求网络数据。
【更新】
componentWillReceiveProps
每当组件属性发生改变,该函数将会被调用,新的属性会通过参数传递过来,可以判断是否用新属性来替换旧属性。
shouldComponentUpdate
组件是否应该更新,当组件的属性和状态发生改变时会触发该函数,返回值为true和false,返回true就更新组件否则不更新,默认返回true。
componentWillUpdate
组件将要被更新。
componentDidUpdate
组件已经被更新。
【卸载】
componentWillUnmount
组件将要被卸载,可以注销定时器和网络请求。
【总结】
到这里,react-native 的组件的完整的生命周期都介绍完了,在回头来看一下前面的图,就比较清晰了,把生命周期的回调函数总结成如下表格: