Состояние - память React компонента
2 года назад·1 мин. на чтение
Компонентам часто необходимо изменить то, что отображается на экране в результате взаимодействия. Ввод в форму должен обновить поле ввода, нажатие «Далее» на карусели изображений должно изменить отображаемое изображение, нажатие «купить» должно поместить продукт в корзину. Компоненты должны «запоминать» вещи: текущее входное значение, текущее изображение, корзину. В React такой тип памяти для конкретного компонента называется состоянием.
Содержание туториала по React
Компонентам часто необходимо изменить то, что отображается на экране в результате взаимодействия. Ввод в форму должен обновить поле ввода, нажатие «Далее» на карусели изображений должно изменить отображаемое изображение, нажатие «купить» должно поместить продукт в корзину. Компоненты должны «запоминать» вещи: текущее входное значение, текущее изображение, корзину. В React такой тип памяти для конкретного компонента называется состоянием.
Обработчик события
Теперь нажатие кнопки «Далее» переключает текущее изображение:
Как устроен
Когда вы вызываете
В следующем примере не используется React, но он дает представление о внутренней работе
Также обратите внимание на то, что компонент
Когда обычной переменной недостаточно
Вот компонент, который рендерит изображение скульптуры. Нажатие кнопки «Далее» должно отобразить следующую скульптуру, изменив индекс на 1, затем на 2 и так далее. Однако это не сработает:// App.jsx import { sculptureList } from './data.js'; export default function Gallery() { let index = 0; function handleClick() { index = index + 1; } let sculpture = sculptureList[index]; return ( <> <button onClick={handleClick}>Next</button> <h2> <i>{sculpture.name} </i> by {sculpture.artist} </h2> <h3> ({index + 1} of {sculptureList.length}) </h3> <img src={sculpture.url} alt={sculpture.alt} /> <p>{sculpture.description}</p> </> ); }
// data.js export const sculptureList = [ { name: 'Sculpture 1 Name', artist: 'Sculpture 1 Artist', description: 'Sculpture 1 Description', url: 'https://example.com/sculpture1.jpg', alt: 'Sculpture 1 Description', }, { name: 'Sculpture 2 Name', artist: 'Sculpture 2 Artist', description: 'Sculpture 2 Description', url: 'https://example.com/sculpture2.jpg', alt: 'Sculpture 2 Description', }, ];
handleClick
обновляет локальную переменную index
. Но две вещи препятствуют тому, чтобы это изменение было видимым:
- Локальные переменные не сохраняются между рендерами. Когда React рендерит этот компонент во второй раз, он рендерит его с нуля — он не учитывает никаких изменений в локальных переменных.
- Изменения локальных переменных не вызовут рендеринга. React не понимает, что ему нужно снова визуализировать компонент с новыми данными.
- Данные между рендерами должны сохраняться.
- Нужно заставить React отрендерить компонент с новыми данными (повторный рендеринг).
- Переменную состояния для сохранения данных между рендерами.
- Функцию установки состояния для обновления переменной и запуска React для повторного рендеринга компонента.
Добавление переменной состояния
Чтобы добавить переменную состояния, импортируйтеuseState
из React в начало файла:
Затем замените эту строку:import { useState } from 'react';
на эту:let index = 0;
const [index, setIndex] = useState(0);
index
— это переменная состояния, а setIndex
— функция установки состояния.
Синтаксис [
и ]
называется деструктурированием массива и позволяет считывать значения из массива. Массив, возвращаемый useState
, всегда содержит ровно два элемента.
Вот как они работают вместе в handleClick
:
function handleClick() { setIndex(index + 1); }
// App.jsx import { useState } from 'react'; import { sculptureList } from './data.js'; export default function Gallery() { const [index, setIndex] = useState(0); function handleClick() { setIndex(index + 1); } let sculpture = sculptureList[index]; return ( <> <button onClick={handleClick}>Next</button> <h2> <i>{sculpture.name} </i> by {sculpture.artist} </h2> <h3> ({index + 1} of {sculptureList.length}) </h3> <img src={sculpture.url} alt={sculpture.alt} /> <p>{sculpture.description}</p> </> ); }
Встречайте свой первый хук
В ReactuseState
, как и любая другая функция, начинающаяся с «use
», называется хуком.
Хуки — это специальные функции, которые доступны только во время рендеринга React (о чем мы поговорим подробнее на следующей странице). Они позволяют вам «подключаться» к различным функциям React.
Состояние — это только одна из этих функций, но позже вы познакомитесь с другими хуками.
Хуки — функции, начинающиеся с use
— могут вызываться только на верхнем уровне ваших компонентов или ваших собственных кастомных хуков. Вы не можете вызывать хуки внутри условий, циклов или других вложенных функций. Хуки — это функции, но полезно думать о них как о безусловных декларациях о потребностях вашего компонента. Вы используете (use) функции React в верхней части вашего компонента, подобно тому, как вы «импортируете» модули в верхней части вашего файла.
Как устроен useState
?
Когда вы вызываете useState
, вы сообщаете React, что хотите, чтобы этот компонент что-то запомнил:
В этом случае вы хотите, чтобы React запомнилconst [index, setIndex] = useState(0);
index
.
По соглашению эта пара именуется как const [something, setSomething]
. Вы можете назвать их как угодно, но соглашения облегчают понимание разных проектов.
Единственный аргумент useState
— это начальное значение вашей переменной состояния. В этом примере начальное значение индекса устанавливается равным 0
с помощью useState(0)
.
Каждый раз, когда ваш компонент рендерится, useState
предоставляет вам массив, содержащий два значения:
- Переменная состояния (
index
) со значением, которое вы сохранили. - Функция установки состояния (
setIndex
), которая может обновлять переменную состояния и запускать React для повторного рендеринга компонента.
const [index, setIndex] = useState(0);
- Ваш компонент отображается в первый раз. Поскольку вы передали
0
вuseState
в качестве начального значения дляindex
, он вернет[0, setIndex]
. React помнит, что0
— это последнее значение состояния. - Вы обновляете состояние. Когда пользователь нажимает кнопку, он вызывается
setIndex(index + 1)
.index
равен0
, поэтому этоsetIndex(1)
. Это говорит React запомнить, чтоindex
теперь равен1
, и запускается другой рендеринг. - Второй рендер вашего компонента. React по-прежнему видит
useState(0)
, но поскольку React запомнил, что вы установилиindex
равным1
, вместо этого он возвращает[1, setIndex]
.
Несколько переменных состояния в компоненте
В одном компоненте вы можете иметь столько переменных состояния любого типа, сколько захотите. Этот компонент имеет две переменные состояния, числовойindex
и логическое значение showMore
, которое переключается, когда вы нажимаете "Show details":
Рекомендуется иметь несколько переменных состояния, если их состояние не связано, напримерimport { useState } from 'react'; import { sculptureList } from './data.js'; export default function Gallery() { const [index, setIndex] = useState(0); const [showMore, setShowMore] = useState(false); function handleNextClick() { setIndex(index + 1); } function handleMoreClick() { setShowMore(!showMore); } let sculpture = sculptureList[index]; return ( <> <button onClick={handleNextClick}>Next</button> <h2> <i>{sculpture.name} </i> by {sculpture.artist} </h2> <h3> ({index + 1} of {sculptureList.length}) </h3> <button onClick={handleMoreClick}> {showMore ? 'Hide' : 'Show'} details </button> {showMore && <p>{sculpture.description}</p>} <img src={sculpture.url} alt={sculpture.alt} /> </> ); }
index
и showMore
в этом примере. Но если вы обнаружите, что часто меняете две переменные состояния вместе, может быть лучше объединить их в одну. Например, если у вас есть форма с множеством полей, удобнее иметь одну переменную состояния, которая содержит объект, чем переменную состояния для каждого поля.
В руководстве "Какую структуру состояния выбрать" содержится больше советов по этому вопросу.
Как React узнает, какое состояние вернуть?
Вы могли заметить, что вызовuseState
не получает никакой информации о том, на какую переменную состояния он ссылается. В useState
не передается «идентификатор», так как же он узнает, какую из переменных состояния следует вернуть?
Чтобы обеспечить лаконичный синтаксис, хуки полагаются на стабильный порядок вызовов при каждом рендеринге одного и того же компонента. Это хорошо работает на практике, потому что если вы будете следовать правилу выше («вызывать хуки только на верхнем уровне»), хуки всегда будут вызываться в одном и том же порядке. Кроме того, linter плагин отлавливает большинство ошибок.
Внутри React хранит массив пар состояний для каждого компонента. Он также поддерживает индекс для текущуй пары, который перед рендерингом устанавливается в 0
. Каждый раз, когда вы вызываете useState
, React предоставляет вам следующую пару состояний и увеличивает индекс.
useState
:
Вам не нужно понимать это, чтобы использовать React, но вы можете найти полезную ментальную модель.let componentHooks = []; let currentHookIndex = 0; // Как useState работает внутри React (упрощенно). function useState(initialState) { let pair = componentHooks[currentHookIndex]; if (pair) { // Это не первый рендер, // поэтому пара состояний уже существует. // Верните его и приготовьтесь к следующему хуку. currentHookIndex++; return pair; } // Это первый рендеринг, // поэтому создаем пару состояния и сохраняем ее. pair = [initialState, setState]; function setState(nextState) { // Когда пользователь запрашивает изменение состояния, // помещаем новое значение в пару. pair[0] = nextState; updateDOM(); } // Сохраняем пару для будущих рендеров // и подготовимся к следующему вызову хука. componentHooks[currentHookIndex] = pair; currentHookIndex++; return pair; } function Gallery() { // Каждый вызов useState() будет получать следующую пару. const [index, setIndex] = useState(0); const [showMore, setShowMore] = useState(false); function handleNextClick() { setIndex(index + 1); } function handleMoreClick() { setShowMore(!showMore); } let sculpture = sculptureList[index]; // В этом примере не используется React, //поэтому вернем объект вместо JSX. return { onNextClick: handleNextClick, onMoreClick: handleMoreClick, header: `${sculpture.name} by ${sculpture.artist}`, counter: `${index + 1} of ${sculptureList.length}`, more: `${showMore ? 'Hide' : 'Show'} details`, description: showMore ? sculpture.description : null, imageSrc: sculpture.url, imageAlt: sculpture.alt, }; } function updateDOM() { // Сбросить текущий индекс хука // перед рендерингом компонента. currentHookIndex = 0; let output = Gallery(); // Обновить DOM, чтобы он соответствовал выходным данным. // Это та часть, которую React делает за вас. nextButton.onclick = output.onNextClick; header.textContent = output.header; moreButton.onclick = output.onMoreClick; moreButton.textContent = output.more; image.src = output.imageSrc; image.alt = output.imageAlt; if (output.description !== null) { description.textContent = output.description; description.style.display = ''; } else { description.style.display = 'none'; } } let nextButton = document.getElementById('nextButton'); let header = document.getElementById('header'); let moreButton = document.getElementById('moreButton'); let description = document.getElementById('description'); let image = document.getElementById('image'); let sculptureList = [ { name: 'Sculpture 1 Name', artist: 'Sculpture 1 Artist', description: 'Sculpture 1 Description', url: 'https://example.com/sculpture1.jpg', alt: 'Sculpture 1 Description', }, { name: 'Sculpture 2 Name', artist: 'Sculpture 2 Artist', description: 'Sculpture 2 Description', url: 'https://example.com/sculpture2.jpg', alt: 'Sculpture 2 Description', }, ]; // Сделать интерфейс соответствующим начальному состоянию. updateDOM();
Состояние изолировано и приватно
Состояние является локальным для экземпляра компонента на экране. Другими словами, если вы рендерите один и тот же компонент дважды, каждая копия будет иметь полностью изолированное состояние. Изменение одного из них не повлияет на другой. В этом примере ранее компонентGallery
визуализируется дважды без каких-либо изменений в его логике.
Это то, что отличает состояние от обычных переменных, которые вы можете объявить в верхней части вашего модуля. Состояние не привязано к конкретному вызову функции или месту в коде, но оно «локально» для определенного места на экране. Мы отрендерили два компонентаimport Gallery from './Gallery.js'; export default function Page() { return ( <div className="Page"> <Gallery /> <Gallery /> </div> ); }
<Gallery />
, поэтому их состояние сохраняется отдельно.
Page
ничего не «знает» о состоянии Gallery
и даже о том, есть ли оно у него. В отличие от пропсов, состояние полностью приватно для компонента, объявляющего его. Родительский компонент не может его изменить. Это позволяет добавлять состояние к любому компоненту или удалять его, не затрагивая остальные компоненты.
Что, если вы хотите, чтобы обе галереи синхронизировали свои состояния? Правильный способ сделать это в React — удалить состояние из дочерних компонентов и добавить его к их ближайшему общему родителю. Следующие несколько частей будут посвящены организации состояния одного компонента, но мы вернемся к этой теме в разделе "Обмен данными между компонентами".
Резюме
- Используйте переменную состояния, когда компоненту необходимо «запомнить» некоторую информацию между рендерами.
- Переменные состояния объявляются путем вызова хука
useState
. - Хуки — это специальные функции, которые начинаются с
use
. Они позволяют вам «подключаться» к возможностям React, таким как состояние. - Вызов хуков, включая
useState
, действителен только на верхнем уровне компонента или другого хука. - Хук
useState
возвращает пару значений: текущее состояние и функцию для его обновления. - Вы можете иметь более одной переменной состояния. Внутри React сопоставляет их по порядку.
- Состояние является приватным для компонента. Если вы рендерите его в двух местах, каждая копия получает свое состояние.
Новые клиентские хуки React 19
год назад·9 мин. на чтение
Обзор и анализ ключевых обновлений и функциональности новых клиентских хуков в React 19
Вопреки распространенному мнению, основная команда React сосредоточена не только на компонентах React Server и Next.js. Новые хуки на стороне клиента появятся в следующей основной версии React, React 19. Они сосредоточены на двух основных точках React: получение данных и формы. Эти хуки повысят производительность разработчиков React, включая тех, кто работает с SPA.
Новые хуки:
Этот новый хук является официальным API для приостановки на клиенте. Вы можете передать ему обещание, и React приостановится на нем до тех пор, пока промис не зарезолвится. Базовый синтаксис, взятый из документации по
Тот же
Этот новый хук призван помочь с асинхронным form action, описанным выше. Вызовите useFormState, чтобы получить доступ к возвращаемому значению действия с момента последней отправки формы.
Эта новый хук позволяет оптимистично обновлять пользовательский интерфейс во время отправки действия.
use(Promise)
use(Context)
- Form Actions
useFormState
useFormStatus
useOptimistic
- Async transitions (Асинхронные переходы)
use(Promise)
Этот новый хук является официальным API для приостановки на клиенте. Вы можете передать ему обещание, и React приостановится на нем до тех пор, пока промис не зарезолвится. Базовый синтаксис, взятый из документации по use
React, выглядит следующим образом:
Хорошая новость заключается в том, что этот хук можно использовать для получения данных. Вот конкретный пример с выборкой данных при монтировании и при нажатии на кнопку. В коде не используется ни одинimport { use } from 'react'; function MessageComponent({ messagePromise }) { const message = use(messagePromise); // ... }
useEffect
:
В ранних версиях было бы получено предупреждение, связанное сimport { useState, use, Suspense } from 'react'; let news = ['news1', 'news2']; const fetchNews = () => { return new Promise<string[]>((resolve) => // имитация запроса данных setTimeout(() => { news = [...news, `news${news.length + 1}`]; resolve(news); }, 500) ); } const News = ({ newsPromise }) => { const news = use<string[]>(newsPromise); return ( <ul> {news.map((title, index) => ( <li key={index}>{title}</li> ))} </ul> ); }; export const App = () => { const [newsPromise, setNewsPromise] = useState( () => fetchNews() ); const handleUpdate = () => { fetchNews().then((news) => { setNewsPromise(Promise.resolve(news)); }); }; return ( <> <button onClick={handleUpdate}>Обновить</button> <Suspense fallback={<p>Запрос данных...</p>}> <News newsPromise={newsPromise} /> </Suspense> </> ); };
<Suspense>
, т.к. требовалось чтобы компонент был lazy-loaded:
Suspense-enabled data fetching without the use of an opinionated framework is not yet supported.
Что ж, это уже не относится к React 19.
Этот новый хук use
имеет скрытую силу: в отличие от всех других хуков React, use
может быть вызван в циклах и условных операторах, таких как if
.
Означает ли это, что нам больше не нужно использовать стороннюю библиотеку, такую как TanStack Query, для получения данных на стороне клиента? Что ж, это еще предстоит выяснить, поскольку Tanstack Query делает больше, чем просто разрешает Promise
.
Но это большой шаг в правильном направлении, и он упростит создание одностраничных приложений на основе REST API или GraphQL.
Подробнее о хуке use(Promise)
.
use(Context)
Тот же use
может быть использован для чтения React Context. Он точно такой же, как useContext
, за исключением того, что его можно вызывать в циклах и условных операторах, таких как if
.
Это упростит иерархию компонентов для некоторых случаев, так как единственным способом чтения контекста в цикле или условном выражении было разделение компонента на две части. Это также большая эволюция с точки зрения производительности, так как теперь вы можете условно пропустить повторный рендеринг компонента, даже если контекст изменился. Подробнее о use(Context).import { use } from 'react'; function HorizontalRule({ show }) { if (show) { const theme = use(ThemeContext); return <hr className={theme} />; } return false; }
Form Actions
Эта новая функциональность позволяет передавать пропaction
в <form>
. React вызовет эту функцию, когда форма будет отправлена:
Помните, что если вы добавите<form action="{handleSubmit}" />
<form action>
в React 18, вы получите следующее предупреждение:
Warning: Invalid value for prop action on <form> tag. Either remove it from the element or pass a string or number value to keep it in the DOM.
Это больше не касается React 19, где вы можете написать форму следующим образом:
Функцияimport { useState } from 'react'; const AddToCartForm = ({ id, title, addToCart }) => { const formAction = async (formData) => { try { await addToCart(formData, title); } catch (e) { // ошибка } }; return ( <form action={formAction}> <h2>{title}</h2> <input type="hidden" name="itemID" value={id} /> <button type="submit">Добавить в корзину</button> </form> ); }; type Item = { id: string; title: string; }; const Cart = ({ cart }: { cart: Item[] }) => { if (cart.length == 0) { return null; } return ( <> Корзина: <ul> {cart.map((item, index) => ( <li key={index}>{item.title}</li> ))} </ul> <hr /> </> ); }; export const App = () => { const [cart, setCart] = useState<Item[]>([]); const addToCart = async (formData: FormData, title) => { const id = String(formData.get('itemID')); // имитация запроса await new Promise( (resolve) => setTimeout(resolve, 1000) ); setCart((cart: Item[]) => [...cart, { id, title }]); return { id }; }; return ( <> <Cart cart={cart} /> <AddToCartForm id="1" title="JavaScript: The Definitive Guide" addToCart={addToCart} /> <AddToCartForm id="2" title="JavaScript: The Good Parts" addToCart={addToCart} /> </> ); };
addToCart
не является серверным действием. Она вызывается на стороне клиента и может быть асинхронной функцией.
Это значительно упростит обработку AJAX-форм в React - например, в форме поиска. Но опять же, этого может быть недостаточно, чтобы избавиться от сторонних библиотек, таких как React Hook Form, которые делают гораздо больше, чем просто обрабатывают отправку форм (проверка, побочные эффекты и т.д.).
В приведенном выше примере вы можете найти некоторые проблемы с юзабилити (кнопка отправки не отключена при отправке, отсутствует сообщение с подтверждением, позднее обновление корзины). К счастью, в этом случае появляется все больше хуков.
Подробнее о <form action>
.
useFormState
Этот новый хук призван помочь с асинхронным form action, описанным выше. Вызовите useFormState, чтобы получить доступ к возвращаемому значению действия с момента последней отправки формы.
Например, это позволяет отобразить подтверждение или сообщение об ошибке, возвращаемое действием формы:import { useFormState } from 'react-dom'; import { action } from './action'; function MyComponent() { const [state, formAction] = useFormState(action, null); // ... return <form action={formAction}>{/* ... */}</form>; }
Примечание:import { useState } from 'react'; import { useFormState } from 'react-dom'; const AddToCartForm = ({ id, title, addToCart }) => { const addToCartAction = async (prevState, formData) => { try { await addToCart(formData, title); return 'Добавлено в корзину'; } catch (e) { return "Невозможно добавить в корзину: товар распродан."; } }; const [message, formAction] = useFormState(addToCartAction, null); return ( <form action={formAction}> <h2>{title}</h2> <input type="hidden" name="itemID" value={id} /> <button type="submit">Добавить в корзину</button> {message} </form> ); }; type Item = { id: string; title: string; }; export const App = () => { const [cart, setCart] = useState<Item[]>([]); const addToCart = async (formData: FormData, title) => { const id = String(formData.get('itemID')); // имитация запроса await new Promise( (resolve) => setTimeout(resolve, 1000) ); if (id === '1') { setCart((cart: Item[]) => [...cart, { id, title }]); } else { throw new Error('Unavailable'); } return { id }; }; return ( <> <AddToCartForm id="1" title="JavaScript: The Definitive Guide" addToCart={addToCart} /> <AddToCartForm id="2" title="JavaScript: The Good Parts" addToCart={addToCart} /> </> ); };
useFormState
должен быть импортирован из react-dom
, а не react
.
Подробнее о useFormState
.
useFormStatus
useFormStatus
позволяет узнать, отправляет ли родительский элемент <form>
в настоящее время или успешно выполнил отправку. Он может быть вызван из дочерних элементов формы, и он возвращает объект со следующими свойствами:
Свойствоconst { pending, data, method, action } = useFormStatus();
data
можно использовать для отображения данных, отправляемых пользователем. Вы также можете отобразить состояние ожидания (pending
), как в следующем примере, где кнопка отключена во время отправки формы:
Примечание:import { useState } from 'react'; import { useFormStatus } from 'react-dom'; const AddToCartForm = ({ id, title, addToCart }) => { const formAction = async (formData) => { try { await addToCart(formData, title); } catch (e) { // ошибка } }; return ( <form action={formAction}> <h2>{title}</h2> <input type="hidden" name="itemID" value={id} /> <SubmitButton /> </form> ); }; const SubmitButton = () => { const { pending } = useFormStatus(); return ( <button disabled={pending} type="submit"> Добавить в корзину </button> ); }; type Item = { id: string; title: string; }; const Cart = ({ cart }: { cart: Item[] }) => { if (cart.length == 0) { return null; } return ( <> Cart content: <ul> {cart.map((item, index) => ( <li key={index}>{item.title}</li> ))} </ul> <hr /> </> ); }; export const App = () => { const [cart, setCart] = useState<Item[]>([]); const addToCart = async (formData: FormData, title) => { const id = String(formData.get('itemID')); // имитация запроса await new Promise( (resolve) => setTimeout(resolve, 1000) ); setCart((cart: Item[]) => [...cart, { id, title }]); return { id }; }; return ( <> <Cart cart={cart} /> <AddToCartForm id="1" title="JavaScript: The Definitive Guide" addToCart={addToCart} /> <AddToCartForm id="2" title="JavaScript: The Good Parts" addToCart={addToCart} /> </> ); };
useFormState
должен быть импортирован из react-dom
, а не react
. Кроме того, он работает только тогда, когда родительская форма использует свойство action
, описанное выше.
Вместе с useFormState
этот хук улучшит пользовательский опыт клиентских форм, не загромождая ваши компоненты бесполезными эффектами. Подробнее о useFormStatus
.
useOptimistic
Эта новый хук позволяет оптимистично обновлять пользовательский интерфейс во время отправки действия.
В приведенном выше примере c корзиной мы могли бы использовать этот хук для отображения корзины с новым элементом, добавленным до завершения AJAX вызова:import { useOptimistic } from 'react'; function AppContainer() { const [optimisticState, addOptimistic] = useOptimisti( state, // updateFn (currentState, optimisticValue) => { // merge and return new state // with optimistic value } ); }
Оптимистичное обновление пользовательского интерфейса — отличный способ улучшить взаимодействие с пользователем веб-приложения. В таком случае эти хуки очень помогают. Подробнее оimport { useState, useOptimistic } from 'react'; const AddToCartForm = ({ id, title, addToCart, optimisticAddToCart }) => { const formAction = async (formData) => { optimisticAddToCart({ id, title }); try { await addToCart(formData, title); } catch (e) { // ошибка } }; return ( <form action={formAction}> <h2>{title}</h2> <input type="hidden" name="itemID" value={id} /> <button type="submit">Добавить в корзину</button> </form> ); }; type Item = { id: string; title: string; }; const Cart = ({ cart }: { cart: Item[] }) => { if (cart.length == 0) { return null; } return ( <> Cart content: <ul> {cart.map((item, index) => ( <li key={index}>{item.title}</li> ))} </ul> <hr /> </> ); }; export const App = () => { const [cart, setCart] = useState<Item[]>([]); const [optimisticCart, optimisticAddToCart] = useOptimistic<Item[], Item>( cart, (state, item) => [...state, item] ); const addToCart = async (formData: FormData, title) => { const id = String(formData.get('itemID')); // имитация запроса await new Promise((resolve) => setTimeout(resolve, 1000)); setCart((cart: Item[]) => [...cart, { id, title }]); return { id }; }; return ( <> <Cart cart={optimisticCart} /> <AddToCartForm id="1" title="JavaScript: The Definitive Guide" addToCart={addToCart} optimisticAddToCart={optimisticAddToCart} /> <AddToCartForm id="2" title="JavaScript: The Good Parts" addToCart={addToCart} optimisticAddToCart={optimisticAddToCart} /> </> ); };
useOptimistic
.
Async Transitions (Асинхронные переходы)
React Transition API позволяет обновлять состояние, не блокируя пользовательский интерфейс. Например, он позволяет отменить предыдущее изменение состояния, если пользователь передумал. Идея состоит в том, чтобы обернуть изменение состояния вызовомstartTransition
.
В следующем примере показана навигация по вкладкам с помощью Transition API. Нажмите «Сообщения», а затем сразу нажмите «Контакты». Обратите внимание, что это прерывает медленный рендеринг "Posts". Вкладка «Контакты» отображается сразу. Так как это обновление состояния помечено как переход, медленная повторная отрисовка не привела к зависанию пользовательского интерфейса.function TabContainer() { const [isPending, startTransition] = useTransition(); const [tab, setTab] = useState('about'); function selectTab(nextTab) { // вместо прямого вызова setTab(nextTab), // оберните изменение состояния в transition startTransition(() => { setTab(nextTab); }); } // ... }
import { useState, useTransition } from 'react'; import TabButton from './TabButton'; import AboutTab from './AboutTab'; import PostsTab from './PostsTab'; import ContactTab from './ContactTab'; export function App() { const [isPending, startTransition] = useTransition(); const [tab, setTab] = useState('about'); function selectTab(nextTab) { startTransition(() => { setTab(nextTab); }); } return ( <> <TabButton isActive={tab === 'about'} onClick={() => selectTab('about')}> О нас </TabButton> <TabButton isActive={tab === 'posts'} onClick={() => selectTab('posts')}> Посты (медленное) </TabButton> <TabButton isActive={tab === 'contact'} onClick={() => selectTab('contact')} > Контакты </TabButton> <hr /> {tab === 'about' && <AboutTab />} {tab === 'posts' && <PostsTab />} {tab === 'contact' && <ContactTab />} </> ); }
useTransition
уже доступен в React 18.2. Что нового в React 19, так это то, что теперь вы можете передать асинхронную функцию startTransition
, которую React ожидает для начала перехода.
Это полезно для отправки данных с помощью AJAX вызова и визуализации результата в переходе. Состояние ожидания перехода начинается с асинхронной отправки данных. Он уже используется в описанной выше функции действий с формами. Это означает, что React вызывает обработчик <form action>
обернутый в startTransition
, поэтому он не блокирует текущую страницу.