Полное руководство для начинающих по реагированию на новые методы компонентов жизненного цикла.

В этом посте мы подробно рассмотрим новые методы компонентов жизненного цикла React v16.3 +.

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

Методы, которые были объявлены устаревшими:

1. componentWillMount ().
2. componentWillUpdate ().
3. componentWillReceiveProps ().

Эти методы все еще существуют в React, но рекомендуется избегать их использования. Теперь они существуют под другим именем в React, например

ComponentWillMount () в UNSAFE_componentWillMount ().

componentWillUpdate () до UNSAFE_componentWillUpdate ().

componentWillReceiveProps () до UNSAFE_componentWillReceiveProps ().

Если вы не знаете, что на самом деле означает этот термин, не волнуйтесь, мы расскажем об этом в этом посте.

Что такое методы жизненного цикла?

В этом мире все проходит через набор событий.

Подобно тому, как рост человека переходит из детства во взрослую жизнь и прогрессирует в старость, аналогично мы реагируем на установку, обновление и отключение.

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

Посмотрим, что на самом деле означают эти термины

Итак, если я попрошу вас создать компонент, который будет отображать это «привет, я здесь, чтобы помочь вам». Я уверен, что вы пойдете дальше и напишете что-то вроде этого.

class Example extends React.Component {
render(){
return <h1 className="displayText">hey i am here to help</h1>
}
}

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

Компонент прошел через пару этапов, прежде чем попасть сюда. Эти фазы обычно называют жизненным циклом компонентов.

Итак, теперь вы поняли, что такое жизненный цикл компонента ... давайте перейдем к изучению этого жизненного цикла.

Первый этап, через который проходит компонент, называется Монтаж. Это то же самое, что принести в этот мир новорожденного ребенка.

Все компоненты перед монтированием находятся в Virtual DOM, которая находится внутри нашей памяти ЦП при монтировании, все компоненты загружаются в DOM браузера.

На этом все не заканчивается. Компонент React «растет». то есть компонент проходит вторую фазу, то есть фазу обновления.

Для компонентов React без обновлений компонент останется таким, каким он был, когда они были созданы в мире DOM.

Ряд компонентов, которые вы пишете, обновляются в соответствии с требованиями через состояние или свойства.

Последний этап, через который проходит компонент, - это этап размонтирования.

На этом этапе компонент умирает, т. Е. Удаляется из своего мира - DOM.

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

Теперь вы поняли четыре важных жизненных цикла компонента React.

1. Монтаж - то же самое, что принести на свет новорожденного.
2. Обновление-компонент реагирования претерпевает изменения.
3. Размонтирование - заключительный этап
4. Обработка ошибок - когда есть ошибка или код не работает.

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

Понимание методов, связанных с каждой фазой

Знание фаз, через которые проходит компонент, является частью уравнения. Другая часть - это понимание методов, доступных на каждом этапе.

Давайте посмотрим на методы, доступные на всех 4 этапах - монтирование, обновление, размонтирование и обработка ошибок.

Давайте начнем с рассмотрения методов, уникальных для этапа монтажа.

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

Фаза монтирования относится к фазе, когда компонент создается и вставляется в DOM.

Следующие методы вызываются по порядку.

1. конструктор ()

Это самый первый метод, который называется «оживлением» компонента.

Метод конструктора вызывается перед монтированием компонента в DOM.

Обычно вы инициализируете состояние и связываете методы обработчиков событий внутри метода конструктора.

const Example extends React.Component {
  constructor(props) {
   super(props) 
    this.state = {
       goals: 0
    }  
    this.handleGoals = this.handleGoals.bind(this) 
    }   
}

Важно отметить, что это первый метод, вызываемый до того, как компонент будет смонтирован в DOM.

Кроме того, конструктор НЕ используется для введения каких-либо побочных эффектов или подписок, таких как обработчики событий.

2. статический getDerivedStateFromProps ()

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

Базовая структура выглядит так:

const Exammple extends React.Component {
  ... 

  static getDerivedStateFromProps(props,state) {
//do stuff here
  }  
}

эти методы принимают реквизиты и состояние. И вы можете вернуть такой объект

... 

  static getDerivedStateFromProps(props, state) { 
     return {
        goals: 2// update state with this
     }
  }  

  ...

или вы можете вернуть null, чтобы не делать таких обновлений

... 

  static getDerivedStateFromProps(props, state) { 
     return null;
  }  

  ...

Я знаю, о чем ты думаешь. Почему именно этот метод жизненного цикла важен? Что ж, это один из редко используемых методов жизненного цикла, но он может пригодиться в определенных сценариях.

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

Давайте разберемся в этом на примере.

Рассмотрим простой компонент, который отображает количество голов, забитых хоккейной командой.

class App extends Component {
  state = {
    goals:2
  }

  render() {
    return (
      <div className="App">
       <p>
         You've scored {this.state.goals} goals.
        </p>
     </div>
    );
  }

Обратите внимание, что текст гласит: общее количество забитых вами 2 голов, где 2 - это количество голов в объекте состояния.

В качестве примера, если вы добавите static getDerivedStateFromProps метод, как показано ниже, какое количество целей будет отображено?

class App extends Component {
  state = {
    goals: 2
  }
    
  static getDerivedStateFromProps(props, state) {
    return {
      goals:5
    }
  }
render(){
return (
      <div className="App">
          <p>
            You've scored {this.state.goals} goals.
          </p>
       
      </div>
    );
  }
}

Прямо сейчас у нас есть static getDerivedStateFromProps метод жизненного цикла компонента. Если вы помните из предыдущего объяснения, этот метод вызывается до того, как компонент монтируется в DOM. Возвращая объект, мы обновляем состояние компонента еще до его рендеринга.

И вот что мы получаем:

Причиной 5 является состояние обновления в методе static getDerivedStateFromProps.

Что ж, этот пример надуманный, и не совсем так, как вы использовали бы метод static getDerivedStateFromProps. Я просто хотел убедиться, что вы сначала поняли основы.

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

Итак, когда вам следует использовать static getDerivedStateFromProps метод жизненного цикла?

Имя метода getDerivedStateFromProps состоит из пяти разных слов: «Получить производное состояние из свойств».

По сути, этот метод позволяет компоненту обновлять свое внутреннее состояние в ответ на изменение свойств.

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

3. Рендеринг

После static getDerivedStateFromProps вызова метода следующий метод жизненного цикла в строке - это render метод:

class Example extends React.Component {
// render is the only required method for a class component 
   render() {
    return <h1> Lets see Rendering </h1>
   }
}

Если вы хотите отображать элементы в DOM, вы пишете это в методе render (как показано выше), т.е. возвращает некоторые JSX.

4. componentDidMount ()

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

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

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

Если вы также хотите выполнять сетевые запросы, как только компонент монтируется в DOM, это также идеальное место для этого:

componentDidMount() {
  this.fetchListOfPosts() // where fetchListOfTweets initiates a netowrk request to fetch a certain list of tweets. 
}

На этом мы подошли к концу этапа монтажа. Давайте посмотрим на следующую фазу, через которую проходит компонент, - фазу обновления.

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

Каждый раз, когда изменяется state или props реагирующего компонента, компонент повторно визуализируется. Говоря простым языком, компонент обновлен. Это этап обновления жизненного цикла компонента.

Итак, какие методы жизненного цикла вызываются при обновлении компонента?

1. статический getDerivedStateFromProps ()

Во-первых, также вызывается метод static getDerivedStateFromProps. Это первый вызываемый метод. Я уже объяснял этот метод на этапе монтажа, поэтому пропущу его.

Важно отметить, что этот метод вызывается как на этапе монтирования, так и на этапе обновления. Тот же метод.

2. shouldComponentUpdate ()

Как только вызывается метод static getDerivedStateFromProps, следующим вызывается метод shouldComponentUpdate.

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

В этом методе жизненного цикла вы можете вернуть логическое значение - true или false и контролировать, будет ли компонент повторно отображаться или нет, то есть при изменении состояния или свойств.

Этот метод жизненного цикла в основном используется для мер по оптимизации производительности. Однако это очень распространенный вариант использования, поэтому вы можете использовать встроенный PureComponent, когда вы не хотите, чтобы компонент повторно отображался, если state и props не меняются.

3. render ()

После вызова метода shouldComponentUpdate сразу же после этого вызывается render - в зависимости от возвращаемого значения из shouldComponentUpdate, которое по умолчанию равно true.

Сразу после вызова метода render следующим вызывается метод getSnapshotBeforeUpdatelifecycle.

Это немного сложно.

Скорее всего, вы не всегда можете использовать этот метод жизненного цикла, но он может пригодиться в определенных особых случаях. В частности, когда вам нужно получить некоторую информацию из DOM (и потенциально изменить ее) сразу после обновления.

Вот что важно. Значение, запрашиваемое из DOM getSnapshotBeforeUpdate, будет относиться к значению непосредственно перед обновлением DOM. Хотя раньше был вызван метод render.

Аналогия, которая может помочь, связана с тем, как вы используете системы контроля версий, такие как git.

Базовым примером является то, что вы пишете код и вносите изменения перед отправкой в ​​репо.

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

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

4. componentDidUpdate ()

Этот метод жизненного цикла вызывается после вызова getSnapshotBeforeUpdate. Как и в случае с методом getSnapshotBeforeUpdate, он получает предыдущие реквизиты и состояние в качестве аргументов:

componentDidUpdate(prevProps, prevState) {
 
}

Любое значение, возвращаемое методом жизненного цикла getSnapshotBeforeUpdate, передается в качестве третьего аргумента методу componentDidUpdate.

Давайте вызовем возвращаемое значение из getSnapshotBeforeUpdate, снимок, и вот что мы получим после

componentDidUpdate(prevProps, prevState, snapshot) {
 
}

Метод размонтирования жизненного цикла

Следующий метод вызывается на этапе размонтирования компонента.

componentWillUnmount ()

Метод жизненного цикла componentWillUnmount вызывается непосредственно перед размонтированием и уничтожением компонента. Это идеальное место для выполнения любой необходимой очистки, такой как очистка таймеров, отмена сетевых запросов или очистка любых подписок, которые были созданы в componentDidMount(), как показано ниже:

componentDidMount() {
    addEventListener()
}

// e.g remove event listener 
componentWillUnmount() {
    removeEventListener()
 }

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

«Что я сделал хорошо?» И «Что я мог бы сделать по-другому или лучше?»

Не стесняйтесь выражать свои отзывы, и вы можете аплодировать этой статье, если этот пост того заслуживает.