Жизненный цикл компонентов React с помощью React Hooks

Когда я впервые начал изучать React Hooks, я спросил себя: «Где методы жизненного цикла?» и я изо всех сил пытался найти прямой ответ на этот вопрос. Поэтому я решил написать об этом и показать некоторые утилиты useEffect.

Я предполагаю, что вы уже знакомы с React и React Hooks.

В классах React методы жизненного цикла просты, я расскажу о componentDidMount, componentDidUpdate, и componentWillUnmount.

React Hooks предоставляет нам метод под названием useEffect, который представляет собой componentDidMount, componentDidUpdate и componentWillUnmountобъединенные.

В компонентах React Class componentDidMount вызывается один раз, только когда компонент отрисовывается в первый раз. Код похож на этот:

componentDidMount() {
//DoSomethingOnceHere
}

Одним из наиболее распространенных применений этого метода жизненного цикла является выполнение вызовов API, которые необходимо вызвать только один раз.

Но теперь с React Hooks мы можем использовать useEffect, чтобы сделать то же самое, например:

useEffect(() => {
//DoSomethingOnceHere
}, [])

Как видите, useEffect получает два параметра: первый — это функция обратного вызова, которая будет вызываться всякий раз, когда компонент отрисовывается, а второй — для проверки изменений конкретных переменных. Мы просто хотим, чтобы он запускался, как только мы сможем поместить туда пустой массив, который никогда не изменится, тогда функция обратного вызова будет вызываться только один раз.

componentDidUpdate вызывается каждый раз при рендеринге или повторном рендеринге компонента. Код такой:

componentDidUpdate() {
//DoSomethingRepeatedHere
}

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

useEffect(() => {
//DoSomethingRepeatedHere
})

Он очень похож на последний, но теперь у него нет второго параметра, то есть нет ограничений на вызов callback-функции, тогда каждый раз при рендеринге компонента она будет вызываться.

Компонент componentWillUnmount вызывается, когда компонент удаляется из DOM, обычное использование будет следующим:

componentWillUnmount() {
//DoALastThingHere
}

Мы также можем использовать здесь useEffect, например:

useEffect(() => {
  return () => {
    //DoALastThingHere
  }
}, [])

Теперь мы возвращаем функцию, которая будет вызываться только при удалении компонента из DOM. Вы также можете смешать componentDidMount с componentDidUnmount с помощью useEffect, например:

useEffect(() => {
  //DoSomethingOnce
  return () => {
    //DoALastThingHere
  }
}, [])

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

Не стесняйтесь связаться со мной в любой социальной сети, указанной здесь:

Твиттер: https://twitter.com/iKazumaki

GitHub: http://github.com/kazumaki/

LinkedIn: https://www.linkedin.com/in/vcamposcarvalho/

Мое портфолио: https://www.viniciuscampos.me

Полезные ссылки:

Руководство useEffect Reactjs: https://reactjs.org/docs/hooks-effect.html

запустить useEffect только один раз: https://css-tricks.com/run-useeffect-only-once/