这篇文章主要讲讲RN的生命周期,并概述一下在每个阶段都干了些什么。
RN的生命周期大致可分为三个阶段,实例化 -> 运行 -> 销毁。
首先讲讲大体的三个阶段做了啥:
实例化阶段:组件第一次绘制。这个阶段完成组件的加载和初始化。
运行阶段:组件进行交互。这个阶段组件可以处理交互,或者接受新的事件更新界面。
销毁阶段:组件卸载消亡。这个阶段做一些组件的清理工作。
下面讲讲生命周期回调函数。
| 生命周期函数 | 调用次数 | 能否使用setSate |
|---|---|---|
| getDefaultProps | 1(全局) | × |
| getInitialState | 1 | × |
| componentWillMount | 1 | √ |
| render | >=1 | × |
| componentDidMount | 1 | √ |
| componentWillReceiveProps | >=0 | √ |
| shouldComponentUpdate | >=0 | × |
| componentWillUpdate | >=0 | × |
| componentDidUpdate | >=0 | × |
| componentWillUnmount | 1 | × |
实例化阶段:
getDefaultProps:在组建创建之前,会先调用getDefaultProps(),全局调用一次。
getInitialState:在组件创建并加载后,调用getInitialState(),用来初始化组件的状态。
componentWillMount:准备加载组件。这个函数是在组件创建并初始化状态之后,第一次render之前调用,整个生命周期中只被调用一次。在这里可以做一些业务的初始化操作,也可以设置组件状态。
render:组件渲染函数,会返回一个Virtual DOM。应该保持render函数的纯净,只渲染组件,不修改状态。
componentDidMount:在render之后,react会根据Virtual DOM来生成真是DOM,生成完毕后会调用componentDidMount(),通知组件已经加载完成。这个函数只被调用一次,可以在这里设置计时setTimeout或setInterval,发起网络请求。在此之后,组件进入稳定运行状态,等待事件触发。
运行阶段
componentWillReceiveProps:当props改变时(父容器更改或redux,不能自身修改),将会调用componentWillReceiveProps(nextProps),新的props将会作为参数传递进来,但是this.props获取的依然是旧的props,可以在这里对state做一些处理(this.setState()),不会引发二次渲染(render)。
shouldComponentUpdate:state和props的变化都会调用shouldComponentUpdate(nextProps, nextState),此函数主要对传递过来的nextProps和nextState进行判断,返回一个布尔值,默认为true,即需要重新渲染,若为false则不渲染。
componentWillUpdate:如果组件状态或者属性改变且上一步的shouldComponentUpdate返回true,就会开始准备更新组件,并调用componentWillUpdate(nextProps, nextState)。调用此函数后,this.props和this.state会分别指向nextProps和nextState,不能在此处更新state和props。
render:与实例化阶段的功能一样。
componentDidUpdate:在render之后,会生成真实的DOM,然后调用componentDidUpdate(prevProps, prevState),传递的参数是当前的props和state。
销毁阶段
componentWillUnmount:当组件需要从界面上移除时,就会调用componentWillUnmount()。在这个函数中,可以做一些相关的清理工作,例如取消定时器和网络请求等。
下面分析一下props和state的异同点
| 属性(props) | 状态(state) | |
|---|---|---|
| 能否从父组件获取初始值 | √ | × |
| 能否由父组件修改 | √ | × |
| 能否在组件内部设置默认值 | √ | √ |
| 能否在组件内部修改 | × | √ |
| 能否设置子组件初始值 | √ | × |
| 能否修改子组件的值 | √ | × |
相同点:
(1)不管是props还是state的改变,都会引发render的重新渲染。
(2)都能由自身组件的相应初始化函数设定初始值。
不同点:
(1)初始值的来源不同。state的初始值来源于自身的geiInitialState函数,props来自于父组件或者自身的getDefaultProps
(2)修改方式。state只能在自身的组件中setState,不能由父组件修改。props只能由父组件修改,不能在自身组件修改。
(3)对子组件。props是一个父组件传递给子组件的数据流,这个数据流可以一直传递到子孙组件。state表示的是一个组件内部自身的状态,只能在自身组件中存在。