无论是Android里的Activity还是iOS里的Controller都有生命周期这样的概念，RN也不例外。
RN的生命周期整体上分为四个阶段：
一.创建阶段：getDefaultProps
该函数用于初始化一些默认的属性，通常会将固定的内容放在这个函数 中进行初始化和赋值； 在组件中，可以利用this.props获取在这里初始化它的属性，由于组件初始化后，再次使用该组件不会调用getDefaultProps函数，所以组件自己不可以自己修改props（即：props可认为是只读的），只可由其他组件调用它时在外部修改。
二.实例化阶段
实例化阶段会连续调用四个方法：
getInitialState,componentWillMount,render,componentDidMount
（1）getInitialState
该函数是用于对组件的一些状态进行初始化；
由于该函数不同于getDefaultProps，在以后的过程中，会再次调用，所以可以将控制控件的状态的一些变量放在这里初始化，如控件上显示的文字，可以通过this.state来获取值，通过this.setState来修改state值， 比如：
this.setState({
title:'Hello'
});
注意：一旦调用了this.setState方法，组件一定会调用render方法，对组件进行再次的渲染，不过，如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。
（2）componentWillMount
相当于OC中的ViewWillAppear方法，在组件将要被加载在视图上之前调用
（3）render
render是一个组件中必须有的方法，本质上是一个函数，并返回JSX或其他组件来构成DOM，和Android的XML布局类似，注意：只能返回一个顶级元素 ; 此外，在render函数中，只可通过this.state来获取值，而不能用this.setState去设置值
（4）componentDidMount
在调用了render方法后，组件加载成功并被成功渲染出来以后，所要执行的后续操作，一般会在这个函数中处理网络请求等加载数据的操作； 因为UI已经成功被渲染出来， 所以放在这个函数里进行请求操作，不会出现UI上的错误。最简单的，我们可以在这里面写一行this.setState方法来验证调用步骤。
三.更新阶段
更新阶段主要发生在用户操作之后或父控件有更新的时候，此时会根据用户的操作行为进行相应的页面结构的调整。
（1）componentWillReceiveProps
指父元素对组件的props进行了修改。this.props一般认为是只读的，如果想修改，只能是在父控件调用setProps方法。
（2）shouldComponentUpdate
在接收到新的 props 或者 state，将要渲染之前调用。该方法在初始化渲染的时候不会调用，在使用forceUpdate方法的时候也不会。
如果确定新的 props 和 state 不会导致组件更新，则此处应该返回 false。
（3）componentWillUpdate
在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。
使用该方法做一些更新之前的准备工作。注意，在该方法中，不能再调用this.setState方法
（4）componentDidUpdate
在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。
使用该方法可以在组件更新之后操作 DOM 元素。
四.销毁阶段
componentWillUnmount
在该方法中执行任何必要的清理，比如无效的定时器
网友评论