借鉴：https://www.jianshu.com/p/986bcbcd02aa

一.RN组件生命周期图

这张图主要介绍了RN组件的props和state在改变的时候，触发不同钩子函数，从而引发组件渲染的过程。
主要有三个阶段包含了组件从初始化、更新、销毁。

RN组件生命周期图详解

二.RN组件生命周期详解

1.初始化

defaultProps 默认props的参数

propTypes Props的类型

state 主要用于初始化state

constructor 构造函数（默认创建一个空的constructor 如果需要props 需要super(props)）

componentWillMount 只在初始化调用一次在render之前 state之后

render 组件渲染函数

componentDidMount 只在初始化调用一次在render之后

2.更新

componentWillReceiveProps(nextProps)：
新的props将会作为参数传递进来，老的props可以根据this.props来获取。我们可以在该函数中对state作一些处理。

boolean shouldComponentUpdate(object nextProps, object nextState)：
该函数主要对传递过来的nextProps和nextState作判断是否更新渲染
true渲染 false不渲染

componentWillUpdate(object nextProps, object nextState)：
与componentWillMount方法类似，组件上会接收到新的props或者state渲染之前，调用该方法。但是不可以在该方法中更新state和props。

render
初始化render相同

componentDidUpdate(object prevProps,object prevState):
与componentDidMount类似，在render之后，传递过来的是当前的props和state。

3.销毁

componentWillUnmount：
组件销毁中移除的时候调用。在这里进行一些相关的销毁操作，比如定时器，监听等等。

生命周期打印结果如图

三.Props和State

上面介绍完了RN组件的生命周期，下面我们就说一下引发生命周期变化的props和state

1.相同点

1.不管是props和state的如何一个变化，都会触发render进行页面的渲染

2.都能由自身组件的相应初始化函数设定初始值。

2.相同点

1.初始值来源：
state（state（constructor）函数） props为 defaultProps

2.修改方式：
state 用setState({}) 或者 this.state.xxx; this.forceUpdate()
props只能由父组件修改，不能在自身组件修改。
*3.对子组件：
props是一个父组件传递给子组件的数据流，这个数据流可以一直传递到子孙组件；state代表的是一个组件内部自身的状态，只能在自身组件中存在。

props和state对比总结

React-Native学习（一）RN组件的生命周期