startTransition

startTransition(scope)

• Ссылка
  • startTransition(scope)
• Использование
  • Отметить обновление состояния как неблокирующую транзицию

Ссылка

startTransition(scope)

Функция startTransition позволяет пометить обновление состояния как транзицию.

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

См. больше примеров ниже.

Параметры

• scope: Функция, которая обновляет некоторое состояние, вызывая одну или несколько функций set. React немедленно вызывает scope без аргументов и помечает все обновления состояния, запланированные синхронно во время вызова функции scope, как транзиции. Они будут неблокирующими и не будут отображать нежелательные индикаторы загрузки.

Возвращаемое значение

startTransition ничего не возвращает.

Ограничения

• startTransition не предоставляет способ отслеживать, ожидается ли транзиция. Чтобы отобразить индикатор ожидания во время выполнения транзиции, вам необходим useTransition вместо этого.

• Вы можете обернуть обновление в транзицию только в том случае, если у вас есть доступ к функции set этого состояния. Если вы хотите начать транзицию в ответ на какой-либо prop или значение возвращаемой пользовательской Hook, попробуйте использовать useDeferredValue вместо этого.

• Функция, которую вы передаете в startTransition, должна быть синхронной. React немедленно выполняет эту функцию, помечая все обновления состояния, которые происходят во время её выполнения, как транзиции. Если вы попытаетесь выполнить дополнительные обновления состояния позже (например, в таймауте), они не будут помечены как транзиции.

• Обновление, помеченное как транзиция, может быть прервано другими обновлениями состояния. Например, если вы обновляете компонент диаграммы внутри транзиции, но затем начинаете вводить текст в поле ввода, пока диаграмма находится посреди перерисовки, React перезапустит работу по перерисовке компонента диаграммы после обработки обновления состояния поля ввода.

• Обновления, помеченные как транзиции, нельзя использовать для управления полями ввода текста.

• Если существует несколько текущих транзиций, React в настоящее время группирует их вместе. Это ограничение, которое, скорее всего, будет устранено в будущей версии.

Использование

Отметить обновление состояния как неблокирующую транзицию

Вы можете пометить обновление состояния как транзицию, обернув его в вызов startTransition:

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

Транзиции позволяют поддерживать отзывчивость пользовательского интерфейса даже на медленных устройствах.

С помощью транзиций ваш пользовательский интерфейс остается отзывчивым во время перерисовки. Например, если пользователь нажимает на вкладку, а затем меняет свое решение и нажимает на другую вкладку, он может сделать это, не дожидаясь завершения первой перерисовки.