Начните работать с ReactJS уже 23 июня на демо-занятии с Никитой Овчинниковым. Вы познакомитесь с основами функционального программирования в JavaScript и узнаете, как писать pure Functions.
Демо-занятие является частью программы онлайн-курса «React.js Developer», который поможет вам эффективно решать задачи фронтенда.
︿︿︿︿︿︿︿︿︿
Жизненный цикл компонента в 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/.