在iOS中UIViewController提供了(void)viewWillAppear:(BOOL)animated, - (void)viewDidLoad,(void)viewWillDisappear:(BOOL)animated等生命周期方法，在Android中Activity则提供了 onCreate(),onStart(),onResume() ,onPause(),onStop(),onDestroy()等生命周期方法，这些生命周期方法展示了一个界面从创建到销毁的一生。
那么在React 中组件(Component)也是有自己的生命周期方法的。
component-lifecycle.jpg
组件的生命周期分成三个状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
心得：你会发现这些React 中组件(Component)的生命周期方法从写法上和iOS中UIViewController的生命周期方法很像，React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用。
1、Mounting(装载)
constructor():
在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
- 第一个语句必须是super(props)。
- contructor将在任意一个RN组件被加载之前优先调用，并且只会调用一次。
- 该函数最大的作用是定义该组件当中需要使用的状态机变量 。
componentWillMount
- 该函数原型为componentWillMount()
- 该函数整个过程中只执行一次
- 该函数会在初始渲染前执行，即在render被调用之前调用
- 该函数执行后render就会调用。
- 如果在render中改变了某些状态机变量，那么RN不会执行渲染，而是等待该函数执行完毕后再次渲染。
- 子组件中同样拥有该方法，并会在父组件执行完毕后执行，该函数无返回值。
- 该函数适合于需要在本地读取一些数据用于显示，那么在render执行前调用是一个很好的时机。
render(渲染函数)
- 调用该方法，先对状态机变量与属性进行检查。
- 如果开发者不想渲染界面的话，可以在此处返回null或者false。
- 该方法适用于进行界面的JSX代码编写，因此不适合在此处对状态机变量进行修改或者访问服务器。
componentDidMount
- 该函数会在render渲染完毕之后调用，整个过程只执行一次。
- 该函数执行后，开发者就可以对界面上的组件或者子组件进行各种操作了。
- 该函数的应用场景适用于在移动端应用启动之后需要访问网络进行某些数据获取。
2、Updating (更新)
componentWillReceiveProps
- 该函数的原型为componentWillReceiveProps(nextProps);
- 当props(属性)发生改变或者接受到新的props时，该函数被调用，并接受一个输入参数，类型为Object，存放新的props，原先反生改变的旧的props仍然可以通过this.props访问。
- 该函数在RN初次被渲染的时候不会被调用。
- 如果在该函数当中对状态机变量进行了修改，RN不会立即渲染页面，而是会等待该方法执行完毕后一起渲染。
shouldComponentUpdate:（组件是否需要更新）
- 该函数原型 : boolean shouldComponentUpdate(nextProps,nextState);
- 当props(属性)或者状态(state)发生改变的时候会触发该函数，分别对应接收的两个参数，根据返回的布尔值来决定是否需要对页面进行重新渲染，如果不进行渲染，那么该方法后续的componentWillUpdate与componentDidUpdate都不会被执行。
- 该函数默认会返回true。
- 应用场景：可以在该函数中编写一些逻辑来判断渲染类型，来阻值一些没有必要的重新渲染，达到提升应用运行效率的目的。
componentWillUpdate
- componentWillUpdate(object nextProps, object nextState)：在接收到新的 props 或者 state 之前立刻调用。
- 该方法原型与上一方法相同，在重新渲染前会调用该方法，为渲染进行准备工作。
- 该函数无返回值。
- 注意：在该方法中，不应该对状态机变量进行修改，要改变，也应该在1.1.5当中进行。
componentDidUpdate
- componentDidUpdate(object prevProps, object prevState):在组件的更新已经同步到 DOM 中之后立刻被调用。
- 该函数会在重新渲染render之后调用，传入上个方法必须的两个参数即可。
3、Unmounting(移除)
componentWillUnmount
该方法会在RN卸载之前调用，无参无返回值，在该方法中，需要对该组件当中申请或者订阅的某些资源与消息进行释放。
在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。
网友评论