React Native学习笔记之组件生命周期

单一组件生命周期

首先看一下RN组件生命周期简略说明图

组件生命周期简图

• 组件初始化获取基本参数，全局只调用一次getDefaultProps严格的说不是组件生命周期的一部分。因为属性往往是在内部事先设置好的，或者父组件传递过来。
• 组件生命周期的第一阶段(初始化)
  • 初始化件的状态值getInitialState
  • 组件即将被安装componentWillMount
  • 对组件进行渲染render
  • 组件安装完毕componentDidMount
• 组件生命周期的第二阶段(组件运行期间的状态)
  • 内部props改变
    • 状态改变state
    • 是否更新状态shouldComponentUpdate在此方法里面不要使用setState修改状态，不然会造成死循环
    • 组件即将更新componentWillUpdate
    • 对组件进行渲染render
    • 组件更新完成componentDidUpdate
  • 外部props改变
    • 组件即将接受属性改变componentWillReceiveProps
    • 是否更新组件shouldComponentUpdata
    • 组件即将更新componentWillUpdate
    • 对组件进行渲染render
    • 组件更新完成componentDidUpdate
• 组件生命周期的第三阶段(组件的卸载)
  • 组件即将卸载componentWillUnmount在此方法里面经常会做一些取消网络请求，销毁定时器等操作。
  • 卸载完成

子父组件相互嵌套生命周期

• 组件生命周期的第一阶段(初始化)
  • 父组件先执行getInitialState,componentWillMount
  • 这个时候就会触发子组件执行getInitialState,componentWillMount,render,componentDidMount
  • 此时父组件在执行render,componentDidMount
• 组件生命周期的第二阶段(组件运行期间的状态)
  • 无论是内部还是外部触发更新，从上面分析可知组件会执行到shouldComponentUpdata如果返回的是true则会接着执行componentWillUpdate子组件如果需要更新，会触发子组件的更新，直到子组件执行完componentDidUpdate，父组件才执行render,componentDidUpdate
• 组件生命周期的第三阶段(组件的卸载)
  • 由上面的分析不难看出，父组件在执行初始化和更新时，如果设计到子组件，在渲染前会先将子组件相关操作执行完毕，然后渲染自己，卸载也是如此
  • 在父组件执行componentWillUnmount完之后会触发子组件的卸载，直到子组件卸载完成再卸载自己