RN组件的生命周期详解

# 一、组件的生命周期

组件的生命周期一般分为这 4 个阶段：创建阶段、实例化阶段、运行（更新）阶段、销毁阶段。下面对各个阶段分别进行介绍。

# 1，创建阶段

• 该阶段主要发生在创建组件类的时候，在这个阶段中会初始化组件的属性类型和默认属性。通常会将固定的内容放在这个过程中进行初始化和赋值。
• 在 ES6 中统一使用 static 成员来实现。

在组件创建之前，会先调用 getDefaultProps()，这是全局调用一次。在组件被创建前加载

static defaultProps = {
  autoPlay: false,
  maxLoop: 10,
};

getInitialState()，来初始化组件的状态。

 getInitialState: function() {
    return {count: 1};
  },

如果使用 ES6 的 class 关键字创建组件，你可以通过给 this.state 赋值的方式来定义组件的初始 state：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  // ...
}

# 2，实例化阶段

该阶段主要发生在实例化组件类的时候，也就是该组件类被调用的时候触发。这个阶段会触发一系列的流程，按执行顺序如下：

• constructor：构造函数，这里主要对组件的一些状态进行初始化。
• componentWillMount：准备加载组件，可以在这里做一些业务初始化操作，或者设置组件状态。
• render：生成页面需要的 DOM 结构，并返回该结构。
• componentDidMount：组件加载成功并被成功渲染出来后执行。一般会将网络请求等加载数据的操作放在这里进行，保证不会出现 UI 上的错误。

# 3，运行（更新）阶段

该阶段主要发生在用户操作之后或者父组件有更新的时候，此时会根据用户的操作行为进行相应的页面结构的调整。这个阶段也会触发一系列的流程，按执行顺序如下：

• componentWillReceiveProps：当组件接收到新的 props 时，会触发该函数。在该函数中，通常可以调用 this.setState 方法来完成对 state 的修改。
• shouldComponentUpdate：该方法用来拦截新的 props 或 state，然后根据事先设定好的判断逻辑，做出最后要不要更新组件的决定。
• componentWillUpdate：当上面的方法拦截返回 true 的时候，就可以在该方法中做一些更新之前的操作。
• render：根据一系列的 diff 算法，生成需要更新的虚拟 DOM 数据。（注意：在 render 中最好只做数据和模板的组合，不应进行 state 等逻辑的修改，这样组件结构会更加清晰）
• componentDidUpdate：该方法在组件的更新已经同步到 DOM 中去后触发，我们常在该方法中做 DOM 操作。

# 4，销毁阶段

该阶段主要在组件消亡的时候触发。

• componentWillUnmount：当组件要被从界面上移除时就会调用。可以在这个函数中做一些相关的清理工作，例如取消计时器、网络请求等。

# 二、生命周期函数详细介绍

# 1，constructor

（1）函数原型 1

constructor(props)

（2）基本介绍 它是组件的构造函数。它的第一个语句必须是 super(props)。 构造函数将在组件被加载前最先调用，并且仅调用一次。

（3）常见用途 构造函数最大的作用，就是在这里定义状态机变量。

# 2，componentWillMount

（1）函数原型 1

componentWillMount()

（2）基本介绍 在组件的生命周期中，这个函数只会被执行一次。 这个函数无参数并且不需要任何返回值。 它在初始渲染（render 函数被 React Native 框架调用执行）前被执行，当它执行完后， render 函数会马上被 React Native 框架调用执行。注意：如果在这个函数里调用 setstate 函数改变了某些状态机变量的值， React Native 框架不会执行渲染操作，而是等待这个函数执行完成后再执行初始渲染。 如果子组件也有 componentWillMount 函数，它会在父组件的 componentWillMount 函数之后被调用。

（3）常见用途 如果我们需要从本地存储中读取数据用于显示，那么在这个函数里进行读取是一个很好的时机。

# 3，render

（1）函数原型 1

render()

（2）基本介绍

• render 是一个组件必须有的方法，用于界面渲染。
• 这个函数无参数，返回 JSX 或者其他组件来构成 DOM。注意：只能返回一个顶级元素。

# 4，componentDidMount

（1）函数原型 1

componentDidMount()

（2）基本介绍

• 在组件的生命周期中，这个函数只会被执行一次。
• 这个函数无参数并且不需要任何返回值。
• 它在初始渲染执行完成后会马上被调用。在组件生命周期的这个时间点之后，开发者可以通过子组件的引用来访问、操作任何子组件。
• 如果子组件也有 componentDidMount 函数，它会在父组件的 componentDidMount 函数之前被调用。

（3）常见用途 如果 React Native 应用需要在程序启动并显示初始界面后从网络侧获取数据，那么把从网络侧获取数据的代码放在这个函数里是一个不错的选择。

# 5，componentWillReceiveProps

（1）函数原型 1

componentWillReceiveProps(nextProps)

（2）基本介绍

• 组件的初始渲染执行完成后，当组件接收到新的 props 时，这个函数将被调用。
• 这个函数不需要返回值。接收一个 object 参数， object 里是新的 props。
• 如果新的 props 会导致界面重新渲染，这个函数将在渲染前被执行。在这个函数中，老的 props 可以通过 this.props 访问，新的 props 在传入的 object 中。
• 如果在这个函数中通过调用 this.setState 函数改变某些状态机变量的值， React Native 框架不会执行对这些状态机变量改变的渲染，而是等componentWillReceiveProps 函数执行完成后一起渲染。

# 6，shouldComponentUpdate

（1）函数原型 1

shouldComponentUpdate(nextProps, nextState)

（2）基本介绍

• 组件的初始渲染执行完成后，当组件接收到新的 state 或者 props 时这个函数将被调用。
• 该函数接收两个 object 参数，其中第一个是新的 props，第二个是新的 state。
• 该函数需要返回一个布尔值，告诉 React Native 框架针对这次改变，是否需要重新渲染本组件。默认返回 true。如果此函数返回 false，React Native 将不会重新渲染本组件，相应的，该组件的 componentWillUpdate 和 componentDidUpdate 函数也不会被调用。

（3）常见用途

• 这个函数常常用来阻止不必要的重新渲染，提高 React Native 应用程序性能。
• 比如我们可以在该函数中比较新老版本的 state 和 props，判断是否需要进行重新渲染。下面是一个简单的使用样例：

shouldComponentUpdate(nextProps, nextState) {
  if(this.state.inputedNum.length < 3) return false;
  return true;
}

# 7，componentWillUpdate

（1）函数原型 1

componentWillUpdate(nextProps, nextState)

（2）基本介绍

• 组件的初始渲染执行完成后， React Native 框架在重新渲染该组件前会调用这个函数。
• 该函数不需要返回值，接收两个 object 参数，其中第一个是新的 props，第二个是新的 state。
• 我们可以在这个函数中为即将发生的重新渲染做一些准备工作，但不能在这个函数中通过 this.setState 再次改变状态机变量的值。如果需要改变，则在 componentWillReceiveProps 函数中进行改变。

# 8，componentDidUpdate

（1）函数原型 1

componentDidUpdate(prevProps, prevState)

（2）基本介绍

• 组件的初始渲染执行完成后，React Native 框架在重新渲染该组件完成后会调用这个函数。
• 该函数不需要返回值，接收两个 object 参数，其中第一个是渲染前的 props，第二个是渲染前的 state。

# 9，componentWillUnmount

（1）函数原型 1

componentWillUnmount()

（2）基本介绍

• 在组件被卸载前，这个函数将被执行。
• 这个函数没有参数，也没不需要返回值。

（3）常见用途

• 如果组件申请了某些资源或者订阅了某些消息，那么需要在这个函数中释放资源，取消订阅。

# 三、完整的样例

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  TextInput,
  View,
  Text,
  Clipboard
} from 'react-native';
 
export default class Main extends Component {
 
  //构造函数
  constructor(props) {
    super(props);
    console.log("constructor");
    //初始化状态值
    this.state = {message: "欢迎访问我的博客"}
  }
 
  componentWillMount() {
    console.log("componentWillMount===>准备加载组件");
  }
 
  render() {
    console.log("render===>渲染界面");
    return (
      <View style={styles.container}>
        <Text style={styles.info}>
          {this.state.message}
        </Text>
      </View>
    );
  }
 
  componentDidMount() {
    console.log("componentDidMount===>组件加载成功并渲染出来");
  }
 
  componentWillReceiveProps(nextProps) {
    console.log("componentWillReceiveProps===>组件接收到新的 props 时触发");
  }
 
  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate===>决定是否需要更新组件");
  }
 
  componentWillUpdate(nextProps, nextState) {
    console.log("componentWillUpdate===>组件重新渲染前会调用");
  }
 
  componentDidUpdate(prevProps, prevState) {
    console.log("componentDidUpdate===>组件重新渲染后会调用");
  }
 
  componentWillUnmount() {
    console.log("componentWillUnmount===>组件被卸载前会调用");
  }
}
 
const styles = StyleSheet.create({
  container:{
     flex:1,
     marginTop:40,
     alignItems:'center',
  },
  info:{
    fontSize:20,
  },
});
 
AppRegistry.registerComponent('HelloWorld', () => Main);