В этом блоге я объясню вам концепцию жизненного цикла компонента React.

React позволяет нам создавать компонент как классы или как функцию. Класс компонента можно определить путем расширения React.Component. Единственный метод, требуемый в классе, - это метод r ender ().

Компонент имеет множество методов образа жизни, которые мы можем переопределить для запуска нашего кода в любое конкретное время, и эти методы разделены на три этапа:

  1. Монтаж
  2. Обновление
  3. Размонтирование

Монтаж

На этом этапе наш компонент React вставляется (монтируется) в DOM. На этом этапе наш компонент React отображает первый раз. На этом этапе у нас есть несколько доступных методов.

  1. ComponentWillMount ()

Это первый метод в жизненном цикле компонента, который выполняется до того, как компонент отображается на веб-странице и монтируется в DOM. т.е. эта функция вызывается перед методом render ().

2. ComponentDidMount ()

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

Обновление

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

Пример: когда мы нажимаем кнопку «Нравится» в любом сообщении Facebook или Instagram, состояние кнопки «Нравится» изменяется, и результатом этого изменения является повторный рендеринг компонента. На этом этапе у нас есть несколько доступных методов.

  1. ShouldComponentUpdated ()

Этот метод решает, будет ли компонент обновляться или нет. Этот метод возвращает логическое значение, то есть True или False. По умолчанию он возвращает true, что означает, что при обновлении состояния компонента компонент будет повторно отображен на веб-странице. И если мы установим это значение в false, то компонент не будет повторно отрисовываться при изменении состояния компонента.

2. ComponentWillUpdate ()

Этот метод вызывается перед повторной отрисовкой компонента из-за изменения состояния компонента. Этот метод вызывается только после shouldcomponentUpdated (). Лучше всего использовать этот метод, когда состояние компонента обновлено, и мы хотим выполнить некоторые действия с этим недавно обновленным состоянием компонентов перед повторным рендерингом компонента.

3. ComponentDidUpdate ()

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

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

Эта фаза является заключительной фазой жизненного цикла компонента перед отключением компонента от DOM.

На этом заключительном этапе у нас есть один доступный метод.

  1. ComponentWillUnmount ()

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