Как понять методы жизненного цикла компонента в ReactJS

В этой статье мы собираемся изучить методы жизненного цикла ReactJS. Но прежде чем переходить к различным методам жизненного цикла React, мы должны понять, что это такое.

Как мы знаем, все в этом мире следует циклу (скажем, люди или деревья). Мы рождаемся, растем и умираем. Практически все в своей жизни следует этому циклу, как и компоненты React. Компоненты создаются (монтируются в DOM), растут за счет обновления и затем умирают (размонтируются в DOM). Это называется жизненным циклом компонента.

Есть разные методы жизненного цикла, которые React предоставляет на разных этапах жизни компонента. React автоматически вызывает ответственный метод в соответствии с фазой, на которой находится компонент. Эти методы дают нам лучший контроль над нашим компонентом, и мы можем управлять им с помощью этих методов.

В настоящее время мы знаем, что такое методы жизненного цикла и почему они важны. Так что же это за разные методы? Давай посмотрим на них.

Методы жизненного цикла

Жизненный цикл компонента можно разделить на четыре части:

• инициализация
• монтаж
• обновление и
• размонтирование.

Давайте обсудим различные методы жизненного цикла, доступные на этих разных этапах (например, инициализация, установка, обновление и размонтирование).

Инициализация

Это фаза, на которой компонент собирается начать свое путешествие с настройки состояния (см. Ниже) и свойств. Обычно это делается внутри метода конструктора (см. Ниже, чтобы лучше понять этап инициализации).

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

Монтаж

Название говорит само за себя. Монтирование - это этап, на котором наш компонент React монтируется в DOM (т. Е. Создается и вставляется в DOM).

Эта фаза появляется на сцене после завершения фазы инициализации. На этом этапе наш компонент отрисовывается в первый раз. На этом этапе доступны следующие методы:

1. componentWillMount ()

Этот метод вызывается непосредственно перед монтированием компонента в DOM или вызовом метода рендеринга. После этого метода компонент монтируется.

Примечание. Вы не должны выполнять вызовы API или какие-либо изменения данных, используя this.setstate в этом методе, потому что он вызывается перед методом рендеринга. Таким образом, с DOM ничего нельзя сделать (т.е. обновить данные с помощью ответа API), поскольку он не был смонтирован. Следовательно, мы не можем обновить состояние с помощью ответа API.

2. componentDidMount ()

Этот метод вызывается после того, как компонент монтируется в DOM. Как и componentWillMount, он вызывается один раз в жизненном цикле. Перед выполнением этого метода вызывается метод рендеринга (т.е. мы можем получить доступ к DOM). Мы можем выполнять вызовы API и обновлять состояние с помощью ответа API.

Ознакомьтесь с этими методами монтажа:

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

Обновление

Это третий этап, через который проходит наш компонент. После фазы монтажа, на которой был создан компонент, в сцену входит фаза обновления. Здесь изменяется состояние компонента и, следовательно, происходит повторный рендеринг.

На этом этапе данные компонента (состояние и свойства) обновляются в ответ на пользовательские события, такие как щелчок, ввод текста и т. Д. Это приводит к повторному рендерингу компонента. На этом этапе доступны следующие методы:

1. shouldComponentUpdate ()

Этот метод определяет, следует ли обновлять компонент. По умолчанию возвращает true. Но в какой-то момент, если вы хотите повторно отрисовать компонент при каком-либо условии, тогда подходящим местом будет метод shouldComponentUpdate.

Предположим, например, что вы хотите повторно визуализировать свой компонент только при изменении свойства, а затем воспользуйтесь мощью этого метода. Он получает такие аргументы, как nextProps и nextState, которые помогают нам решить, нужно ли выполнять повторный рендеринг, путем сравнения с текущим значением свойства.

2. componentWillUpdate ()

Как и другие методы, его название говорит само за себя. Он вызывается перед повторным рендерингом компонента. Он вызывается один раз после метода shouldComponentUpdate. Если вы хотите выполнить некоторые вычисления перед повторным рендерингом компонента и после обновления состояния и опоры, то это лучшее место для этого. Как и метод shouldComponentUpdate, он также принимает такие аргументы, как nextProps и nextState.

3. ComponentDidUpdate ()

Этот метод вызывается сразу после повторного рендеринга компонента. После обновления нового (обновленного) компонента в DOM выполняется метод componentDidUpdate. Этот метод получает такие аргументы, как prevProps и prevState.

Посмотрите, чтобы лучше понять методы обновления:

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

Размонтирование

Это последний этап жизненного цикла компонента. Как следует из названия, на этом этапе компонент отключается от DOM. На этом этапе доступен следующий метод:

1. componentWillUnmount ()

Этот метод вызывается перед размонтированием компонента. Перед удалением компонента из модели DOM выполняется componentWillUnMount. Этот метод обозначает конец жизненного цикла компонента.

Вот блок-схема методов жизненного цикла:

Вот и все об этой важной части мира React - методах жизненного цикла. Надеюсь, вам понравилось это читать.

Спасибо!