2.5Kпросмотров
88.3%от подписчиков
28 октября 2025 г.
Score: 2.7K
<Activity></Activity> Здарова, работяги! Наконец-то я добрался до докладов с React Conf 2025. Писать про React Foundation и т. д. я не буду, тк не гадалка. Поживем увидим, к чему это приведет. А вот с фичами давайте разберемся. Начнем с компонента Activity. В чем его суть: позволяет скрывать и восстанавливать кусочек интерфейса (компонент со всеми его дочерними), сохраняя внутреннее состояние и «останавливая» срабатывание эффектов, предварительно вызвав cleanup. Что это нам даёт? Возможность скрывать элементы без потери состояния — самый базовый кейс. Актуально для вкладок, сайдбаров и подобного. Доклад, да и док, пестрит подобными примерами. Суть в том, что в отличие от условного рендеринга стейт при таком скрытии сбрасываться не будет, поэтому при повторном показе пользователь сможет продолжить с того места, где он остановился. Возможность заранее рендерить кусочек интерфейса — уже более интересный кейс. Если компонент Activity скрыт во время первоначальной отрисовки, его дочерние элементы не будут видны на странице. Но! Самое важное! Они всё равно будут рендериться. У меня было тут два основных опасения: влияние на перф и фоновые эффекты. Но эти моменты продумали: приоритет рендеринга у таких элементов ниже, чем у видимых, а эффекты в них не будут срабатывать. Сегментация для выборочной гидрации — пожалуй, самое интересное. Selective Hydration позволяет сократить ожидание интерактивности интерфейса — пользователь может быстрее жать на нужные кнопочки. Раньше для разделения дерева на независимые части вы, скорее всего, использовали Suspense, но его использование только для селективной гидрации будет порождать моргания плейсхолдера. Activity лишен этого косяка, но также позволяет выделить независимые части, гидрацию которых можно либо отложить, либо ускорить. Но! Есть и подводные камни. Всё, что вы не очистили в cleanup (таймер, интервал, видос, аудио, iframe и т. д., и т. п.) после скрытия может продолжать жить «в фоне» — ждите проблем. Так, например, интервал, обновляющий локальный стейт, продолжит это делать и в скрытом состоянии, а после показа элемента вы увидите последствия его скрытой работы, т. к. стейт при скрытии/показе не сбрасывается. Может возникнуть вопрос: «А почему не использовать для скрытия css???» Жизненный цикл и эффекты
- CSS: компонент остаётся смонтирован, эффекты продолжают работать.
- Activity: перед скрытием выполняется cleanup; эффекты «спят», пока поддерево скрыто. Рендер/перформанс
- CSS: скрытая часть конкурирует за ресурсы как обычно; планировщик React это не учитывает.
- Activity: скрытому поддереву назначается низкий приоритет; можно безопасно пререндерить его в фоне, не мешая видимому UI. Гидрация/SSR
- CSS: не даёт границы для выборочной гидрации — гидрируется всё как обычно.
- Activity: формирует сегменты для Selective Hydration — можно откладывать/ускорять гидрацию скрытых частей. Итого: штука интересная, кейсов применения много, посмотрим, как будет использоваться.