Жизненный цикл компонента в React

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

Компоненты в React рождаются, решают какую-то задачу и прекращают свое существование. Всё, как у людей, однако жизненные этапы все же несколько отличаются от человеческих. Посмотрим, как они выглядят:

Каждый закрашенный горизонтальный прямоугольник на рисунке выше отображает метод жизненного цикла, кроме, разве что «React updates DOM and refs». Столбцы в данном случае отображают различные этапы жизни компонента.

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

Методы жизненного цикла дают возможность запускать код в конкретные моменты жизни компонента либо в ответ на какие-нибудь изменения.

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

Этап № 1: монтирование

Как известно, компоненты, созданные на основе классов, тоже являются классами. Именно поэтому первый запускаемый метод — constructor(). Как правило, именно в constructor() мы выполняем инициализацию состояния компонента.

Далее компонент запускает getDerivedStateFromProps(), потом запускается render(), возвращающий JSX. React «монтируется» в DOM. Следующий этап — запуск метода componentDidMount(). Тут происходит выполнение всех асинхронных вызовов к базам данных. Итак, компонент «рожден».

Этап № 2: обновление

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

Потом происходит запуск shouldComponentUpdate(). Тут можно выполнять сравнение старых свойств с новым перечнем свойств либо сравнивать состояния. При этом мы можем указать, надо ли отображать компонент заново, возвращая true либо false — это даст возможность сделать приложение более эффективным благодаря уменьшению числа лишних отображений. Если же shouldComponentUpdate() возвращает false, этап обновлений завершается.

В обратном случае React отобразится заново, а потом запустится getSnapshotBeforeUpdate(). Потом React запустит componentDidUpdate(). Как и в случае с componentDidMount(), его можно применять для асинхронных вызовов либо управления DOM.

Этап № 3: размонтирование

Все хорошее имеет тенденцию заканчиваться. Когда компонент прожил свою жизнь, наступает размонтирование — последний жизненный этап. Во время удаления компонента из DOM React выполняет запуск componentWillUnmount() непосредственно перед удалением. Данный метод применяется при закрытии всех открытых соединений типа web-сокетов либо тайм-аутов.

Прочие методы жизненного цикла

Также можно упомянуть такие методы, как forceUpdate() и getDerivedStateFromError(). Первый метод напрямую вызывает повторное отображение. У него существует несколько применений, но его желательно избегать.

Что касается getDerivedStateFromError(), то это метод, который не совсем является частью жизненного цикла. Когда в компоненте появляется ошибка, происходит запуск getDerivedStateFromError(), в результате появляется возможность обновить состояние, дабы показать, что ошибка имела место быть. Вот этот метод следует использовать чаще.

Последующий фрагмент программного кода с CodePen покажет основные этапы стадии монтирования:

Вывод будет следующим:

По материалам: https://www.freecodecamp.org/news/these-are-the-concepts-you-should-know-in-react-js-after-you-learn-the-basics-ee1d2f4b8030/.