3.2　React Native中的生命周期

任何生命体都会经历从出生到消亡的过程，React Native框架中的组件同样具有这样的属性。在组件生命周期的每个阶段，React Native提供了多个生命周期函数，供开发者作为切入组件的钩子（hook），这样在对应的时间点程序就可以做对应的逻辑处理，从而实现相应的功能。

在React Native程序启动时，内部的虚拟DOM开始建立，生命周期就是建立在此虚拟DOM的整个生命周期之中，从虚拟DOM的初始化到虚拟DOM的卸载，React Native为组件的不同状态建立了不同的生命周期。

在图3-4中，可以看到在React Native虚拟DOM的几个大的阶段中，都存在对应的生命周期函数。下面就分阶段介绍。

1．初始化阶段

此阶段设定组件props和state的默认值，可通过如下代码赋值：

1. static defaultProps = {  
2.   autoPlay: false,  
3.   maxLoop: 10,  
4. };

2．加载阶段

此阶段为组件开始实例化的阶段，比如当该组件被其他组件调用的时候。主要包含以下三个函数：

• componentWillMount：组件将要开始加载，若需要在组件开始加载前添加一些业务逻辑，那么就可以在此函数中添加。
• render：组件开始根据props和state生成页面的DOM，并最终返回此DOM。在此函数中不可以修改props和state的值，只可以读取，并且返回的DOM只能有一个顶层元素，比如说只能由一个div包裹所有的元素返回。
• componentDidMount：组件已加载完毕，在render函数之后立即执行此函数。可以在这里进行网络请求，因为组件UI渲染好之后再进行网络请求，一般不会造成UI的错乱问题。在此生命周期函数中修改了state的值后，UI会立即进行重新渲染，所以这是一个通过加载网络数据更新UI的好时机。

3．更新阶段

当用户操作或者父组件有更新并且组件由于props或state的变更导致组件需要重新渲染时，会经历此阶段。而在更新渲染的几个重要时机，React Native提供了如下的生命周期函数供开发者执行对应的逻辑操作：

• componentWillReceiveProps：当接收到更新的props值时，会执行此函数，此时可以将接收到的props值赋值给state。
• shouldComponentUpdate：此函数用于判断新的props和state的变更需不需要引起组件的UI更新，默认是都会引起更新的，但是React Native提供了此函数供开发者自主决定是否需要更新。如果此函数返回True，那么组件将进行更新，如果返回False，那么组件就不更新。此函数在优化App性能时非常重要，因为可以通过此函数拦截掉很多不必要的组件UI更新。
• componentWillUpdate：如果以上函数shouldComponentUpdate返回了True，那么此函数将继续执行，表示组件即将进行更新操作。在更新操作前，还有时机进行相关的逻辑处理。但是从逻辑上你也应该明白，这里不可以再修改state的值，而只需做一些更新前的其他准备工作。
• componentDidUpdate：组件更新完毕之后执行的函数。此函数有两个参数prevProps和prevState，分别为更新前的props与state。这里可以进行新旧值的比较，如果发现值有变化则可以进行一些网络请求、加载数据等操作。

4．卸载阶段

• componentWillUnmount：此函数在组件被卸载和注销前执行，这里可以进行一些所谓的扫尾工作，如关闭之前的网络请求、清空一些不必要的存储、循环执行的定时器的清除等。

至此，React Native一个组件的完整生命周期执行完毕，你可以通过下面的代码体会React Native每个阶段的执行过程。实际开发时只需要根据项目需求在对应的生命周期函数中添加上自己的业务逻辑即可。 X5mDQDtO9GL8wsxV0FdEmT18lYEoNuS19b6ulHsyeFuX3wnpY0eeGoXTxP/UoaXt

 1. /** 
 2. * 章节: 03-06 
 3. * React Native 中的生命周期 
 4. * FilePath: /03-06/lifecycle.js 
 5. * @Parry 
 6. */  
 7.   
 8. import React, { Component } from 'react';  
 9. import { AppRegistry,View,Text } from 'react-native';  
10.    
11. export default class LifeCycle extends Component {  
12.   
13.   constructor(props) {  
14.     super(props);  
15.     this.state = {  
16.       name: "React"  
17.     }  
18.   }  
19.    
20.   //组件即将加载  
21.   componentWillMount() {  
22.     console.log("componentWillMount");  
23.   }  
24.    
25.   //开始组件渲染  
26.   render() {  
27.     console.log("render");  
28.     return (  
29.       <View>  
30.         <Text>  
31.           {this.state.name}  
32.         </Text>  
33.       </View>  
34.     );  
35.   }  
36.    
37.   //组件加载完毕后  
38.   componentDidMount() {  
39.     console.log("componentDidMount");  
40.   }  
41.   
42.   //组件接收到新的 props  
43.   componentWillReceiveProps(nextProps) {  
44.     console.log("componentWillReceiveProps");  
45.   }  
46.    
47.   //逻辑控制是否需要更新组件  
48.   shouldComponentUpdate(nextProps, nextState) {  
49.     console.log("shouldComponentUpdate");  
50.   }  
51.    
52.   //组件即将更新重新渲染  
53.   componentWillUpdate(nextProps, nextState) {  
54.     console.log("componentWillUpdate");  
55.   }  
56.    
57.   //组件重新渲染后  
58.   componentDidUpdate(prevProps, prevState) {  
59.     console.log("componentDidUpdate");  
60.   }  
61.   
62.   //组件卸载注销前  
63.   componentWillUnmount() {  
64.     console.log("componentWillUnmount");  
65.   }  
66. }  
67.    
68. AppRegistry.registerComponent('LifeCycle', () => Main);