reactjs生命周期_如何在ReactJS中了解组件的生命周期方法

reactjs生命周期

In this article, we are going to explore the lifecycle methods of ReactJS. But, before moving ahead to React’s different lifecycle methods, we should understand what it is.

在本文中，我们将探索ReactJS的生命周期方法。 但是，在继续使用React的不同生命周期方法之前，我们应该了解它是什么。

As we know, everything in this world follows a cycle (say humans or trees). We are born, grow, and then die. Almost everything follows this cycle in its life, and React components do as well. Components are created (mounted on the DOM), grow by updating, and then die (unmount on DOM). This is referred to as a component lifecycle.

众所周知，这个世界上的所有事物都遵循一个周期(比如人类或树木)。 我们出生，成长，然后死亡。 几乎所有事物都遵循其生命周期，React组件也是如此。 组件被创建(安装在DOM上)，通过更新而增长，然后消失(在DOM上卸载)。 这称为组件生命周期。

There are different lifecycle methods that React provides at different phases of a component’s life. React automatically calls the responsible method according to the phase in which the component is. These methods give us better control over our component and we can manipulate them using these methods.

React在组件生命周期的不同阶段提供了不同的生命周期方法。 React根据组件所在的阶段自动调用负责的方法。 这些方法使我们可以更好地控制组件，并且可以使用这些方法来对其进行操作。

At present, we know what lifecycle methods are and why they are important. So what are these different methods? Let’s have a look into them.

目前，我们知道什么是生命周期方法，以及为什么它们很重要。 那么这些不同的方法是什么？ 让我们来看看它们。

生命周期方法 (Lifecycle Methods)

A component’s lifecycle is broadly classified into four parts:

组件的生命周期大致分为四个部分：

• initialization

  初始化

• mounting

  安装

• updating, and

  更新，以及

• unmounting.

  正在卸载 。

Let’s discuss the different lifecycle methods that are available at these different phases (i.e., initialization, mounting, updating & unmounting).

让我们讨论在这些不同阶段(即，初始化，安装，更新和卸载)可用的不同生命周期方法。

初始化 (Initialization)

This is the phase in which the component is going to start its journey by setting up the state (see below) and the props. This is usually done inside the constructor method (see below to understand the initialization phase better).

在这个阶段，组件将通过设置状态(请参见下文)和道具来开始其旅程。 这通常是在构造函数方法中完成的(请参阅下面的内容，以更好地了解初始化阶段)。

class Initialize extends React.Component {
    constructor(props)
    {
    // Calling the constructor of
    // Parent Class React.Component
    super(props);
    // initialization process
    this.state = {
       date : new Date(),
       clickedStatus: false
     };
}

安装 (Mounting)

The name is self-explanatory. Mounting is the phase in which our React component mounts on the DOM (i.e., is created and inserted into the DOM).

这个名字是不言而喻的。 挂载是我们的React组件在DOM上挂载的阶段(即创建并插入到DOM中)。

This phase comes onto the scene after the initialization phase is completed. In this phase, our component renders the first time. The methods that are available in this phase are:

初始化阶段完成后，此阶段进入现场。 在此阶段，我们的组件将首次呈现。 此阶段可用的方法是：

1. componentWillMount()

1. componentWillMount()

This method is called just before a component mounts on the DOM or the render method is called. After this method, the component gets mounted.

在组件安装在DOM上或调用render方法之前，将调用此方法。 使用此方法后，将安装组件。

Note: You should not make API calls or any data changes using this.setstate in this method because it is called before the render method. So, nothing can be done with the DOM (i.e. updating the data with API response) as it has not been mounted. Hence, we can’t update the state with the API response.

注意：请勿在此方法中使用this.setstate进行API调用或任何数据更改，因为它是在render方法之前调用的。 因此，由于DOM尚未挂载，因此无法对其进行任何处理(即使用API​​响应更新数据)。 因此，我们无法使用API​​响应来更新状态。

2. componentDidMount()

2. componentDidMount()

This method is called after the component gets mounted on the DOM. Like componentWillMount, it is called once in a lifecycle. Before the execution of this method, the render method is called (i.e., we can access the DOM). We can make API calls and update the state with the API response.

在组件安装到DOM后，将调用此方法。 与componentWillMount一样，它在生命周期中被调用一次。 在执行此方法之前，将调用render方法(即，我们可以访问DOM)。 我们可以进行API调用，并使用API​​响应更新状态。

Have a look to understand these mounting methods:

看一下这些安装方法：

class LifeCycle extends React.Component {
  componentWillMount() {
      console.log('Component will mount!')
   }
  componentDidMount() {
      console.log('Component did mount!')
      this.getList();
   }
  getList=()=>{
   /*** method to make api call***
  }
  render() {
      return (
         <div>
            <h3>Hello mounting methods!</h3>
         </div>
      );
   }
}

更新中 (Updating)

This is the third phase through which our component passes. After the mounting phase where the component has been created, the update phase comes into the scene. This is where component’s state changes and hence, re-rendering takes place.

这是我们组件通过的第三阶段。 在已创建组件的安装阶段之后，进入了更新阶段。 这是组件状态改变的地方，因此，进行了重新渲染。

In this phase, the data of the component (state & props) updates in response to user events like clicking, typing and so on. This results in the re-rendering of the component. The methods that are available in this phase are:

在此阶段，组件的数据(状态和道具)会根据用户事件(例如单击，键入等)进行更新。 这导致组件的重新渲染。 此阶段可用的方法是：

1. shouldComponentUpdate()

   shouldComponentUpdate()

This method determines whether the component should be updated or not. By default, it returns true. But at some point, if you want to re-render the component on some condition, then shouldComponentUpdate method is the right place.

此方法确定是否应更新组件。 默认情况下，它返回true。 但是在某些时候，如果您想在某种条件下重新渲染组件，那么应该使用componentComponentUpdate方法。

Suppose, for example, you want to only re-render your component when there is a change in prop — then utilize the power of this method. It receives arguments like nextProps and nextState which help us decide whether to re-render by doing a comparison with the current prop value.

例如，假设您只想在prop发生更改时才重新渲染组件，然后利用此方法的强大功能。 它接收诸如nextProps和nextState之类的参数，这些参数可以帮助我们通过与当前prop值进行比较来决定是否重新渲染。

2. componentWillUpdate()

2. componentWillUpdate()

Like other methods, its name is also self-explanatory. It is called before the re-rendering of the component takes place. It is called once after the ‘shouldComponentUpdate’ method. If you want to perform some calculation before re-rendering of the component and after updating the state and prop, then this is the best place to do it. Like the ‘shouldComponentUpdate’ method, it also receives arguments like nextProps and nextState.

像其他方法一样，它的名称也是不言而喻的。 在重新渲染组件之前调用它。 在“ shouldComponentUpdate ”方法之后调用一次。 如果要在重新渲染组件之前以及在更新状态和属性之后执行一些计算，那么这是执行此操作的最佳位置。 与“ shouldComponentUpdate”方法一样，它也接收诸如nextProps和nextState之类的参数。

3. ComponentDidUpdate()

3. ComponentDidUpdate()

This method is called just after the re-rendering of the component. After the new (updated) component gets updated on the DOM, the ‘componentDidUpdate’ method is executed. This method receives arguments like prevProps and prevState.

在重新渲染组件之后立即调用此方法。 在新的(更新的)组件在DOM上更新后，将执行' componentDidUpdate '方法。 此方法接收诸如prevProps和prevState之类的参数。

Have a look to understand the updating methods better:

看看如何更好地了解更新方法：

class LifeCycle extends React.Component {
      constructor(props)
      {
        super(props);
         this.state = {
           date : new Date(),
           clickedStatus: false,
           list:[]
         };
      }
      componentWillMount() {
          console.log('Component will mount!')
       }
      componentDidMount() {
          console.log('Component did mount!')
          this.getList();
       }
      getList=()=>{
       /*** method to make api call***
       fetch('https://api.mydomain.com')
          .then(response => response.json())
          .then(data => this.setState({ list:data }));
      }
       shouldComponentUpdate(nextProps, nextState){
         return this.state.list!==nextState.list
        }
       componentWillUpdate(nextProps, nextState) {
          console.log('Component will update!');
       }
       componentDidUpdate(prevProps, prevState) {
          console.log('Component did update!')
       }
      render() {
          return (
             <div>
                <h3>Hello Mounting Lifecycle Methods!</h3>
             </div>
          );
       }
}

正在卸载 (Unmounting)

This is the last phase in the component’s lifecycle. As the name clearly suggests, the component gets unmounted from the DOM in this phase. The method that is available in this phase is:

这是组件生命周期的最后一个阶段。 顾名思义，该阶段将组件从DOM卸载。 此阶段可用的方法是：

1. componentWillUnmount()

1. componentWillUnmount()

This method is called before the unmounting of the component takes place. Before the removal of the component from the DOM, ‘componentWillUnMount’ executes. This method denotes the end of the component’s lifecycle.

在卸载组件之前会调用此方法。 在从DOM中删除组件之前，将执行' componentWillUnMount' 。 此方法表示组件生命周期的结束。

Here is a flowchart representation of lifecycle methods:

这是生命周期方法的流程图表示：

That’s all about this important part of the React world — lifecycle methods. I hope you enjoyed reading it.

这就是React世界的重要部分-生命周期方法。 希望您喜欢阅读。

Thanks!

谢谢！

翻译自: https://www.freecodecamp.org/news/how-to-understand-a-components-lifecycle-methods-in-reactjs-e1a609840630/

reactjs生命周期