Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 При правильном использовании React большая часть компонентов состоит из метода render и обработчиков событий:

2 Но не все задачи решаются так просто. Представьте себе компонент <Clock />, имитирующий цифровые часы в форматечч:мм:сс. Заготовка:

3 Этот компонент отображает текущее время. Теперь нужно придумать, как его обновлять. Часы, в отличие от обычных компонентов, не ожидают действий от пользователя. Они обновляются каждую секунду самостоятельно. Возникает цепочка: происходит событие => меняется текущее время => React вызывает render и меняет DOM. Итак, состояние инициализируется текущим временем:

4 Компонент по-прежнему показывает текущее время на момент отрисовки/перерисовки компонента, но теперь он готов к изменению. Время относится к периодическим событиям, для которых используются таймеры. Для <Clock /> подойдет setInterval. Таймер должен быть установлен сразу после отрисовки часов и должен быть очищен при удалении компонента из дерева элементов.

5 Где запускать таймер? render вызывается на каждое изменение состояния, а значит он не подходит. Ведь тогда <Clock /> будет запускать новый таймер каждую секунду. Конструктор кажется более подходящим местом, но здесь ожидает сюрприз. Вызов конструктора и отрисовка часов в DOM-дереве, в общем случае - два независимых события. Посмотрите на код:

6 Эти часы еще не находятся в DOM-дереве, но уже вовсю работают и обновляются. Стоит ли об этом беспокоиться? Да, такое поведение крайне неожиданно, оно мешает тестированию и расходует процессорное время. Кроме того, конструктор никак не помогает с удалением таймера.

7 Каждый компонент React проходит несколько стадий в процессе своей жизни: он создается, затем добавляется в DOM, затем может обновляться (например, при изменении пропсов или состояния), и, наконец, удаляется из дерева. Этот процесс называют жизненным циклом компонента (Component Lifecycle). React предоставляет набор методов, которые позволяют встроиться в этот процесс. Например, запуск часов логичнее всего сделать сразу после их отрисовки. В этом поможет метод componentDidMount. Он вызывается сразу после отрисовки компонента. Происходит это ровно один раз.

8 Обратите внимание на то, как сохраняется идентификатор таймера внутри объекта. Он не участвует в представлении, поэтому нет необходимости сохранять его в состоянии.

9 Теперь нужно выполнить очистку таймера. Для этого подойдет метод componentWillUnmount, который выполняется прямо перед удалением компонента из DOM.

10 Часы приобрели законченный вид.

11 Итак, вы узнали два метода, позволяющих встраиваться в жизненный цикл компонента, но их значительно больше. Они делятся на три независимые группы:

12 Монтирование (Mounting)

13 Эти методы вызываются по порядку во время создания объекта и вставки его в DOM.

14 <ul><li>constructor()</li>

15 <li>static getDerivedStateFromProps()</li>

16 <li>render()</li>

17 <li>componentDidMount()</li>

18 </ul>Обновление (Updating)

19 Обновление может происходить при изменении свойств или состояния. Эти методы вызываются по порядку во время перерисовки:

20 <ul><li>static getDerivedStateFromProps()</li>

21 <li>shouldComponentUpdate()</li>

22 <li>render()</li>

23 <li>getSnapshotBeforeUpdate()</li>

24 <li>componentDidUpdate()</li>

25 </ul>Удаление или демонтирование (Unmounting)

26 В эту группу входит один метод. Он вызывается во время удаления компонента из DOM.

27 <ul><li>componentWillUnmount()</li>

28 </ul>Такое количество методов объясняется сложностью реальной разработки. Но на практике лишь некоторые используются регулярно. К таким методам относится componentDidMount. С его помощью устанавливают таймеры, выполняют AJAX-запросы, меняют DOM в обход React. Последнее бывает нужно при интеграции со сторонними библиотеками.