startTransition¶

startTransition позволяет обновлять состояние без блокировки пользовательского интерфейса.

1

startTransition(scope);

Описание¶

startTransition(scope)¶

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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 этого состояния. Если вы хотите запустить переход в ответ на какой-то пропс или пользовательское возвращаемое значение Hook, попробуйте вместо этого использовать useDeferredValue.
• Функция, которую вы передаете в startTransition, должна быть синхронной. React немедленно выполняет эту функцию, помечая все обновления состояния, которые происходят во время ее выполнения, как переходы. Если вы попытаетесь выполнить дополнительные обновления состояния позже (например, во время таймаута), они не будут помечены как переходы.
• Обновление состояния, помеченное как переход, будет прерываться другими обновлениями состояния. Например, если вы обновите компонент графика внутри перехода, а затем начнете вводить текст в input, в то время как график находится в середине повторного рендеринга, React перезапустит работу рендеринга компонента графика после обработки обновления состояния input.
• Обновления переходов не могут быть использованы для управления текстовыми вводами.
• Если есть несколько текущих переходов, React в настоящее время собирает их вместе. Это ограничение, которое, вероятно, будет устранено в будущем выпуске.

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

Пометка обновления состояния как неблокирующего перехода¶

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import { startTransition } from 'react';

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

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

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

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

Источник — https://react.dev/reference/react/startTransition

Комментарии