Как использовать хук useTransition в React

В динамичном мире веб-разработки создание плавных и цельных пользовательских интерфейсов имеет важное значение для улучшения пользовательского опыта. React, одна из самых популярных библиотек JavaScript, предлагает различные возможности для оптимизации разработки пользовательского интерфейса.

Среди них хук useTransition выделяется как мощный инструмент для эффективного управления переходами и анимацией без блокировки пользовательского интерфейса. В этом блоге мы рассмотрим хук useTransition, его преимущества и способы его реализации в ваших приложениях React.

Что такое useTransition?

Хук useTransition — относительно новое дополнение к коллекции хуков React, представленное в React версии 18. Он предназначен для управления сложными переходами пользовательского интерфейса, позволяя откладывать рендеринг определенных компонентов. Тем самым это помогает предотвратить узкие места в производительности и улучшить взаимодействие с пользователем во время интенсивных обновлений или переходов.

Основная цель useTransition — позволить приложениям React оставаться отзывчивыми и поддерживать плавную анимацию даже во время тяжелых операций, таких как получение данных, крупномасштабные обновления или любые процессы, которые могут привести к временному зависанию пользовательского интерфейса.

Преимущества использованияПереход

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

Как использовать useTransition?

Давайте рассмотрим пошаговое руководство по использованию хука useTransition в вашем приложении React.

Шаг 1. Обновите React до версии 18 (или выше).

Прежде чем использовать перехватчик useTransition, убедитесь, что ваше приложение React работает на версии 18 или выше. Этот хук появился в React 18, поэтому вам необходимо соответствующим образом обновить зависимости вашего проекта.

Шаг 2. Импортируйте хук

Чтобы использовать хук useTransition, импортируйте его из пакета реагирования.

import { useTransition } from 'react';

Шаг 3: Определите переход

Затем определите переход, используя хук useTransition. Для перехватчика требуется два аргумента: ресурсоемкая функция и объект конфигурации.

const [startTransition, isPending] = useTransition();

Шаг 4. Осуществите переход

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

const fetchData = () => {
  // Perform the resource-intensive operation (e.g., fetching data from an API)
};
 
const handleButtonClick = () => {
  startTransition(() => {
    fetchData();
  });
};

Шаг 5. Отрисовка ожидающего компонента

Во время перехода или во время выполнения ресурсоемкой задачи вы можете отображать «загружаемый» или «ожидающий» компонент для предоставления обратной связи пользователю. Вы можете использовать значение isPending, возвращаемое ловушкой useTransition, для условной визуализации этого компонента.

const App = () => {
  return (
    <div>
      {/* Your main components */}
      {isPending && <LoadingComponent />}
    </div>
  );
};

Пример: бесконечная прокрутка с помощью useTransition

Представьте, что у вас есть веб-приложение, отображающее список элементов, полученных из API. Когда пользователь прокручивает страницу вниз, приложение извлекает дополнительные данные для динамической загрузки большего количества элементов.

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

Шаг 1. Создайте новое приложение React

Сначала вам нужно создать новое приложение React. Для этого следуйте руководству Как создать свое первое приложение ReactJS: пример Hello World.

Создайте новое приложение реагирования с именем «бесконечная прокрутка». Следуйте всем инструкциям, чтобы удалить ненужные файлы из проекта. Обязательно сохраните файл App.js и не удаляйте его, как указано в приведенной выше инструкции блога.

Шаг 2. Убедитесь, что приведенный ниже код присутствует в указанных файлах.

Подробнее

Как использовать хук useTransition в React — с примерами