反应组件生命周期

在ReactJS中，每个组件创建过程都涉及各种生命周期方法。这些生命周期方法称为组件的生命周期。这些生命周期方法不是很复杂，在组件生命周期的各个阶段都需要调用。组件的生命周期分为四个阶段。他们是：

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

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

1.初始阶段

这是ReactJS组件生命周期的诞生阶段。在这里，组件开始了通往DOM的旅程。在此阶段，组件包含默认的Props和初始状态。这些默认属性在组件的构造函数中完成。初始阶段仅发生一次，并且由以下方法组成。

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

2.安装阶段

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

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

3.更新阶段

这是反应组件生命周期的下一个阶段。在这里，我们获得了新的道具并更改了State 。此阶段还允许处理用户交互并提供与组件层次结构的通信。此阶段的主要目的是确保组件显示其自身的最新版本。与出生或死亡阶段不同，此阶段一次又一次地重复。此阶段包括以下方法。

• componentWillRecieveProps()当组件接收到新的道具时调用。如果要更新状态以响应道具更改，则应比较this.props和nextProps以使用this.setState()方法执行状态转换。
• shouldComponentUpdate()当组件决定对DOM的任何更改/更新时将调用它。它允许您控制组件更新自身的行为。如果此方法返回true，则组件将更新。否则，组件将跳过更新。
• componentWillUpdate()在组件更新发生之前被调用。在这里，您不能通过调用this.setState()方法来更改组件状态。如果shouldComponentUpdate()返回false，则不会调用它。
• render()被调用以检查this.props和this.state并返回以下类型之一：React元素，Arrays和fragments，Boolean或null，String和Number。如果shouldComponentUpdate()返回false，则将再次调用render()中的代码以确保组件正确显示自身。
• componentDidUpdate()在组件更新发生后立即调用。在此方法中，您可以在更新发生后将要执行的任何代码放入其中。初始渲染不调用此方法。

4.卸载阶段

这是反应组件生命周期的最后阶段。当组件实例被销毁并从DOM卸载时调用。此阶段仅包含一种方法，下面给出。

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

例

import React, { Component } from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {hello: "JavaTpoint"};
      this.changeState = this.changeState.bind(this)
   }  
   render() {
      return (
         

             
ReactJS component's Lifecycle
             
Hello {this.state.hello}
             Click Here!        
         
      );
   }
   componentWillMount() {
      console.log('Component Will MOUNT!')
   }
   componentDidMount() {
      console.log('Component Did MOUNT!')
   }
   changeState(){
      this.setState({hello:"All!!- Its a great reactjs tutorial."});
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component Will Recieve Props!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component Will UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component Did UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component Will UNMOUNT!')
   }
}
export default App;

输出：

当您单击“单击此处”按钮时，您将获得更新的结果，该结果显示在以下屏幕中。