还没理解透？三分钟带你看懂React-Native 组件生命周期

521 05-13

概述

所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图：
在这里插入图片描述

如图，可以把组件生命周期大致分为三个阶段：

第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；

第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；

第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。

一、组件的生命周期

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

1.1 创建阶段

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

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

1.2 实例化阶段

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

constructor：构造函数，这里主要对组件的一些状态进行初始化。

componentWillMount：准备加载组件，可以在这里做一些业务初始化操作，或者设置组件状态。

render：生成页面需要的 DOM 结构，并返回该结构。

componentDidMount：组件加载成功并被成功渲染出来后执行。一般会将网络请求等加载数据的操作放在这里进行，保证不会出现 UI 上的错误。

1.3 运行（更新）阶段

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

componentWillReceiveProps：当组件接收到新的 props 时，会触发该函数。在该函数中，通常可以调用 this.setState 方法来完成对 state 的修改。

shouldComponentUpdate：该方法用来拦截新的 props 或 state，然后根据事先设定好的判断逻辑，做出最后要不要更新组件的决定。

componentWillUpdate：当上面的方法拦截返回 true 的时候，就可以在该方法中做一些更新之前的操作。

render：根据一系列的 diff 算法，生成需要更新的虚拟 DOM 数据。（注意：在 render 中最好只做数据和模板的组合，不应进行 state 等逻辑的修改，这样组件结构会更加清晰）

componentDidUpdate：该方法在组件的更新已经同步到 DOM 中去后触发，常在该方法中做 DOM 操作。

1.4 销毁阶段

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

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

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

下面来详细介绍生命周期中的各回调函数。

constructor

（1）函数原型

constructor(props)

（2）基本介绍

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

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

getDefaultProps

在组件创建之前，会先调用 getDefaultProps()，全局调用一次。严格来说，这不是组件生命周期的一部分。在组件被创建并加载后，首先调用 getInitialState()，来初始化组件的状态。

componentWillMount

然后，准备加载组件，会调用 componentWillMount()，其原型如下：

void componentWillMount()

这个函数调用时机是在组件创建，并初始化状态之后，在第一次绘制 render() 之前。

（2）基本介绍

在组件的生命周期中，这个函数只会被执行一次。

这个函数无参数并且不需要任何返回值。

它在初始渲染（render 函数被 React Native 框架调用执行）前被执行，当它执行完后， render 函数会马上被 React Native 框架调用执行。注意：如果在这个函数里调用 setstate 函数改变了某些状态机变量的值， React Native 框架不会执行渲染操作，而是等待这个函数执行完成后再执行初始渲染。

如果子组件也有 componentWillMount 函数，它会在父组件的 componentWillMount 函数之后被调用。

（3）常见用途
如果我们需要从本地存储中读取数据用于显示，那么在这个函数里进行读取是一个很好的时机。可以在这里做一些业务初始化操作，也可以设置组件状态。

render

（1）函数原型

render()

（2）基本介绍

render 是一个组件必须有的方法，用于界面渲染。
这个函数无参数，返回 JSX 或者其他组件来构成 DOM。

注意：只能返回一个顶级元素。

componentDidMount

在组件第一次绘制之后，会调用 componentDidMount()，通知组件已经加载完成。函数原型如下：

void componentDidMount()

这个函数调用的时候，其虚拟 DOM 已经构建完成，你可以在这个函数开始获取其中的元素或者子组件。需要注意的是，RN 框架是先调用子组件的 componentDidMount()，然后调用父组件的函数。从这个函数开始，就可以和 JS 其他框架交互了，例如设置计时 setTimeout 或者 setInterval，或者发起网络请求。这个函数也是只被调用一次。这个函数之后，就进入了稳定运行状态，等待事件触发。

（2）基本介绍

在组件的生命周期中，这个函数只会被执行一次。

这个函数无参数并且不需要任何返回值。

它在初始渲染执行完成后会马上被调用。在组件生命周期的这个时间点之后，开发者可以通过子组件的引用来访问、操作任何子组件。

如果子组件也有 componentDidMount 函数，它会在父组件的 componentDidMount 函数之前被调用。

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

componentWillReceiveProps

如果组件收到新的属性（props），就会调用 componentWillReceiveProps()，其原型如下：

void componentWillReceiveProps( 
  object nextProps
)

输入参数 nextProps 是即将被设置的属性，旧的属性还是可以通过 this.props 来获取。在这个回调函数里面，可以根据属性变化，通过调用 this.setState() 来更新组件状态，这里调用更新状态是安全的，并不会触发额外的 render() 调用。如下：

componentWillReceiveProps: function(nextProps) {  
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

（2）基本介绍

组件的初始渲染执行完成后，当组件接收到新的 props 时，这个函数将被调用。

这个函数不需要返回值。接收一个 object 参数， object 里是新的 props。

如果新的 props 会导致界面重新渲染，这个函数将在渲染前被执行。在这个函数中，老的 props 可以通过 this.props 访问，新的 props 在传入的 object 中。

如果在这个函数中通过调用 this.setState 函数改变某些状态机变量的值， React Native 框架不会执行对这些状态机变量改变的渲染，而是等 componentWillReceiveProps 函数执行完成后一起渲染。

注意：当React Native 初次被渲染时，componentWillReceiveProps 函数并不会被触发，这种机制是故意设计的。

shouldComponentUpdate

当组件接收到新的属性和状态改变，都会触发调用 shouldComponentUpdate(...)，函数原型如下：

boolean shouldComponentUpdate(  
  object nextProps, object nextState
)

输入参数 nextProps 和上面的 componentWillReceiveProps 函数一样，nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件，如果 true 表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态。

默认情况下，这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。在大型项目中，可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，有效提高应用性能。

（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;
}

componentWillUpdate

如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，就会开始准更新组件，并调用 componentWillUpdate()，其函数原型如下：

void componentWillUpdate(  
  object nextProps, object nextState
)

输入参数与 shouldComponentUpdate 一样，在这个回调中，可以做一些在更新界面之前要做的事情。需要特别注意的是，在这个函数里面，不能使用 this.setState 来修改状态。这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props和 this.state 中。紧接着这个函数，就会调用 render() 来更新界面。

（2）基本介绍

组件初始渲染执行完成后， React Native 框架在重新渲染该组件前会调用这个函数。

该函数不需要返回值，接收两个 object 参数，其中第一个是新的 props，第二个是新的 state。

可以在这个函数中为即将发生的重新渲染做一些准备工作，但不能在这个函数中通过 this.setState 再次改变状态机变量的值。如果需要改变，则在 componentWillReceiveProps 函数中进行改变。

componentDidUpdate

调用了 render() 更新完成界面之后，会调用 componentDidUpdate() 来得到通知，其函数原型如下：

void componentDidUpdate(  
  object prevProps, object prevState
)

到这里，就完成了属性和状态的更新，此函数的输入参数变成了 prevProps 和 prevState。

基本介绍

组件初始渲染执行完成后，React Native 框架在重新渲染该组件完成后会调用这个函数。

该函数不需要返回值，接收两个 object 参数，其中第一个是渲染前的 props，第二个是渲染前的 state。

componentWillUnmount

当组件要被从界面上移除的时候，就会调用 componentWillUnmount()，其函数原型如下：

void 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: "欢迎访问 hangge.com"}
  }
 
  //准备加载组件
  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");
  }
 
  //组件接收到新的 props 时触发
  componentWillReceiveProps(nextProps) {
    console.log("componentWillReceiveProps");
  }
 
  //决定是否需要更新组件
  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);

控制台输出信息如下(由于样例中没有更新状态，也没有销毁组件。所以也就没有后面两个阶段）：
在这里插入图片描述

四、总结

到这里，RN 组件完整的生命介绍完毕，回过头来看一下前面的图，就比较清晰了，把生命周期的回调函数总结成如下表格：
在这里插入图片描述

web前端开发工程师面试题（react）

标签： React