Заметки про React: “React Labs: View Transitions, Activity, и другое В React Labs представ…”

React Labs: View Transitions, Activity, и другое

В React Labs представили два новых экспериментальных API: View Transitions и Activity. Подробнее о каждой из них:

View Transitions предназначен для анимации переходов в приложении. С ее помощью можно декларативно объявить, что анимировать, когда и как. Пример:


// «Что» анимировать
<ViewTransition>
  <div>animate me</div>
</ViewTransition>

Чтобы определить «когда» анимировать, можно использовать один из трех триггеров: startTransition, useDeferredValue или Suspense.

Для стилизации анимации используйте CSS:


// «Как» анимировать
::view-transition-old(*) {
  animation: 300ms ease-out fade-out;
}
::view-transition-new(*) {
  animation: 300ms ease-in fade-in;
}

Также есть возможность указывать причину анимации через API addTransitionType, пример:


function navigate(url) {
  startTransition(() => {
    addTransitionType('nav-forward');
    go(url);
  });
}
function navigateBack(url) {
  startTransition(() => {
    addTransitionType('nav-back');
    go(url);
  });
}

<ViewTransition
  name="nav"
  share={{
    'nav-forward': 'slide-forward',
    'nav-back': 'slide-back',
  }}>
  {heading}
</ViewTransition>

::view-transition-old(.slide-forward) {
    animation: ...
}

::view-transition-new(.slide-forward) {
    animation: ...
}

Activity это новое API, которое позволяет визуально скрывать компонент с UI, снижать его приоритет при рендере, при этом сохраняя его стейт. Использование этого API дешевле в плане производительности по сравнению с размонтированием или скрытием через CSS. Пример компонента <Activity>:


<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <Page />
</Activity>

Когда у Activity мод 'visible', то компонент рендерится как обычно, а когда 'hidden', то размонтируется, но сохранит стейт и продолжит рендерится с более низким приоритетом чем видимые компоненты.

Acitivity и View Transition можно использовать вместе, пример:


<ViewTransition>
  <Activity mode={url === '/' ? 'visible' : 'hidden'}>
    <Home />
  </Activity>
  <Activity mode={url === '/details/1' ? 'visible' : 'hidden'}>
    <Details id={id} />
  </Activity>
<ViewTransition>

https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more