ReactNative组件的生命周
首先了解一下几个名词
state: 组件自身属性,主要用来存储自身需要的数据,state属性的值发生变化,会被ReactJS会监听到,主动触发组件的render方法更新界面。
props: 组件自身属性,主要用来存储父组件传递过来的参数,组件自身不能修改。
虚拟DOM: 根据真实的DOM结构,映射出的JSON数据结构。
ReactNative组件的生命周可以分为四个阶段
- 创建阶段
getDefautProps:
处理props的默认值
props一般存储的父组件传过来的参数,getDefautProps:
可以给props设置默认值,如果父组件建没有给传props,在组件使用到props时就会使用到设置的默认值,如果父组件传了props的参数,就会覆盖掉设置的默认值。该方法只调用一次。
- 实例化阶段
getInitialState:
初始化state默认值
componentWillMount:
组件将要渲染
render:
渲染组件
componentDidMount:
组件渲染完毕
getInitialState:
初始化组件自身的state的默认值。componentWillMount:
组件将要渲染时调用。 componentDidMount:
所以组件渲染完毕时调用,这三个方法会在组件初始化的时候按顺序依次调用,并且只调用一次。在渲染过程中遇到子组件的换会在componentWillMount:
和componentDidMount:
之间完成。
- 更新阶段
componentWillReceiveProps:
this.props发生变化时调用。
shouldComponentUpdate:
根据this.props和this.state判断是否更新
componentWillUpdate:
shouldComponentUpdate:
返回true,组件将要更新时被调用
render:
返回需要更新的内容
componentDidUpdate:
更新完毕时调用
- 销毁阶段
只是文字介绍太枯燥,接下来用图片说明组件的生命周期: ReactNative.png
componentUnMount:
组件销毁时被调用,取消时间绑定,移除定时器,移除虚拟DOM中的对应的组件数据结构等。
如果这张不习惯那就看下面这张呗
rnlc.jpg
配上图是不是更好理解了呢?