React组件生命周期详细解析 – ReactJS实战教程

上一章ReactJS实战教程请查看：React组件API用法全解

在ReactJS中，每个组件创建过程都涉及各种生命周期方法，这些生命周期方法被称为组件的生命周期。这些生命周期方法不是很复杂，并且在组件生命周期的不同时间点调用。组件的生命周期分为四个阶段。它们是:

• 初始阶段
• 安装阶段
• 更新阶段
• 卸载阶段

每个阶段都包含一些特定于特定阶段的生命周期方法，让我们逐一讨论这些阶段。

1. 初始阶段

它是ReactJS组件生命周期的起始阶段。在这里，组件开始了它通往DOM的旅程。在此阶段，组件包含默认的道具和初始状态，这些默认属性是在组件的构造函数中完成的。初始阶段只出现一次，由以下方法组成。

• getDefaultProps()：它用于指定this.props的默认值，它是在创建组件或将来自父组件的任何道具传递到组件之前调用的。
• getInitialState()：它用于指定this.state的默认值，它是在组件创建之前调用的。

2. 安装阶段

在此阶段，将创建组件的实例并将其插入到DOM中。它由以下方法组成。

• componentWillMount()：这是在将组件呈现到DOM之前立即调用的。在这种情况下，当你在这个方法中调用setState()时，组件将不会重新呈现。
• componentDidMount()：在呈现组件并将其放置在DOM上之后立即调用。现在，你可以执行任何DOM查询操作。
• render()：每个组件都定义了此方法，它负责返回一个根HTML节点元素。如果不希望呈现任何内容，可以返回null或false值。

3. 更新阶段

它是react组件生命周期的下一个阶段，在这里，我们得到了新的props并改变了状态。此阶段还允许处理用户交互并提供与组件层次结构的通信。此阶段的主要目的是确保组件显示其自身的最新版本。与初始或卸载阶段不同，这个阶段不断重复。此阶段包括以下方法。

• componentWillRecieveProps()：当组件接收到新道具时调用它，如果你想更新状态以响应props更改，你应该比较这一点，使用this.setState()方法执行状态转换。
• shouldComponentUpdate()：当组件决定对DOM的任何更改/更新时，将调用它。它允许你控制组件更新自身的行为。如果此方法返回true，则组件将更新。否则，组件将跳过更新。
• componentWillUpdate()：它是在组件更新之前调用的。在这里，你不能通过调用this.setState()方法来更改组件状态。如果shouldComponentUpdate()返回false，则不会调用它。
• render()：调用它来检查this.state和this.props并返回以下类型之一：React元素、数组和片段fragment、布尔值或null、字符串和数字。如果shouldComponentUpdate()返回false，将再次调用render()中的代码，以确保组件正确地显示自己。
• componentDidUpdate()：在组件更新发生后立即调用它。在此方法中，你可以将任何代码放入其中，以便在更新发生时执行。初始呈现不调用此方法。

4. 卸载阶段

它是react组件生命周期的最后一个阶段，在从DOM中销毁和卸载组件实例时调用它。这个阶段只包含一个方法，如下所示。

• componentWillUnmount()：此方法在组件被永久销毁和卸载之前立即调用。它执行任何必要的清理相关任务，如使计时器失效、事件监听器、取消网络请求或清理DOM元素。如果组件实例被卸载，则无法再次挂载它。

例子

import React, { Component } from 'react';  
  
class App extends React.Component {  
   constructor(props) {  
      super(props);  
      this.state = {hello: "srcmini"};  
      this.changeState = this.changeState.bind(this)  
   }    
   render() {  
      return (  
         <div>  
             <h1>ReactJS组件生命周期</h1>  
             <h3>Hello {this.state.hello}</h3>  
             <button onClick = {this.changeState}>点击</button>          
         </div>  
      );  
   }  
   componentWillMount() {  
      console.log('组件将挂载!')  
   }  
   componentDidMount() {  
      console.log('组件已经挂载!')  
   }  
   changeState(){  
      this.setState({hello:"这是reactjs实战教程."});  
   }  
   componentWillReceiveProps(newProps) {      
      console.log('组件将收到Props!')  
   }  
   shouldComponentUpdate(newProps, newState) {  
      return true;  
   }  
   componentWillUpdate(nextProps, nextState) {  
      console.log('组件将更新!');  
   }  
   componentDidUpdate(prevProps, prevState) {  
      console.log('组件已经更新!')  
   }  
   componentWillUnmount() {  
      console.log('组件将卸载!')  
   }  
}  
export default App;