{"componentChunkName":"component---src-templates-docs-js","path":"/docs/concurrent-mode-reference.html","result":{"data":{"markdownRemark":{"html":"\n
\n
\n

Внимание:

\n

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

\n

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

\n
\n
\n

Страница содержит справочник API конкурентного режима React. Если вам нужно вводное руководство по этому режиму, прочитайте о паттернах конкурентного UI.

\n

Примечание: это не стабильный релиз, а предварительная версия для сообщества. Скорее всего, в будущем API изменится. Используйте его на свой страх и риск!

\n\n

Включение конкурентного режима

\n

createRoot

\n
ReactDOM.createRoot(rootNode).render(<App />);
\n

Заменяет ReactDOM.render(<App />, rootNode) и включает конкурентный режим.

\n

Дополнительную информацию можно узнать в документации конкурентного режима.

\n

createBlockingRoot

\n
ReactDOM.createBlockingRoot(rootNode).render(<App />)
\n

Заменяет ReactDOM.render(<App />, rootNode) и включает блокирующий режим.

\n

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

\n

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

\n

API задержек

\n

Suspense

\n
<Suspense fallback={<h1>Загрузка...</h1>}>\n  <ProfilePhoto />\n  <ProfileDetails />\n</Suspense>
\n

Suspense позволяет вашим компонентам «ждать», отображая запасной интерфейс, прежде чем они будут отрендерены.

\n

В примере компонент ProfileDetails получает данные с помощью асинхронного вызова. Во время ожидания загрузки ProfileDetails и ProfilePhoto, отображается запасной заголовок Загрузка.... Следует отметить, что до тех пор, пока все дочерние компоненты <Suspense> не отрендерены, мы увидим запасной интерфейс.

\n

Suspense принимает два пропса:

\n\n

<SuspenseList>

\n
<SuspenseList revealOrder=\"forwards\">\n  <Suspense fallback={'Загрузка...'}>\n    <ProfilePicture id={1} />\n  </Suspense>\n  <Suspense fallback={'Загрузка...'}>\n    <ProfilePicture id={2} />\n  </Suspense>\n  <Suspense fallback={'Загрузка...'}>\n    <ProfilePicture id={3} />\n  </Suspense>\n  ...\n</SuspenseList>
\n

SuspenseList помогает скоординировать загрузку множества компонентов с помощью определения порядка, в котором они будут показываться пользователю.

\n

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

\n

SuspenseList принимает два пропса:

\n\n

Учтите, что SuspenseList управляет только ближайшими вложенными компонентами Suspense и SuspenseList. Поиск осуществляется не более, чем на один уровень вниз, но при этом можно делать многоуровневые вложения SuspenseList для построения более сложной разметки.

\n

useTransition

\n
const SUSPENSE_CONFIG = { timeoutMs: 2000 };\n\nconst [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);
\n

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

\n

Хук useTransition возвращает массив из двух элементов.

\n\n

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

\n
const SUSPENSE_CONFIG = { timeoutMs: 2000 };\n\nfunction App() {\n  const [resource, setResource] = useState(initialResource);\n  const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG);\n  return (\n    <>\n      <button\n        disabled={isPending}\n        onClick={() => {\n          startTransition(() => {\n            const nextUserId = getNextId(resource.userId);\n            setResource(fetchProfileData(nextUserId));\n          });\n        }}\n      >\n        Next\n      </button>\n      {isPending ? \" Загрузка...\" : null}\n      <Suspense fallback={<Spinner />}>\n        <ProfilePage resource={resource} />\n      </Suspense>\n    </>\n  );\n}
\n

В этом примере мы обернули получение данных в функцию startTransition. Это позволяет сразу загружать данные профиля пользователя, откладывая рендер страницы и компонента Spinner на 2 секунды (время указано в timeoutMs).

\n

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

\n

Паттерн перехода более подробно рассматривается в разделе Паттерны конкурентного UI.

\n

Конфигурирование useTransition

\n
const SUSPENSE_CONFIG = { timeoutMs: 2000 };
\n

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

\n

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

\n

useDeferredValue

\n
const deferredValue = useDeferredValue(value, { timeoutMs: 2000 });
\n

Хук возвращает отложенную версию для значения, получение которого может «отставать» от рендера всего компонента более чем на timeoutMs.

\n

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

\n

Хорошим примером является ввод текста.

\n
function App() {\n  const [text, setText] = useState(\"hello\");\n  const deferredText = useDeferredValue(text, { timeoutMs: 2000 });\n\n  return (\n    <div className=\"App\">\n      {/* Вводим текст в поле ... */}\n      <input value={text} onChange={handleChange} />\n      ...\n      {/* ... при этом список может отображать отложенное значение */}\n      <MySlowList text={deferredText} />\n    </div>\n  );\n }
\n

Такой подход позволяет немедленно показывать новый текст для input, чтобы улучшить отзывчивость UI. В тоже время, если рендер MySlowList «отстает» на 2 секунды, установленные в timeoutMs, то в фоновом режиме отображается отложенное значение.

\n

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

\n

Конфигурирование useDeferredValue

\n
const SUSPENSE_CONFIG = { timeoutMs: 2000 };
\n

useDeferredValue принимает объект настройки задержек со свойством timeoutMs. Этот тайм-аут (в миллисекундах) сообщает React, на сколько долго отложенное значение может отставать.

\n

React будет пытаться использовать более короткую задержку, когда сеть и устройство это позволяют.

","frontmatter":{"title":"Справочник API конкурентного режима (экспериментально)","next":null,"prev":"concurrent-mode-adoption.html"},"fields":{"path":"content/docs/concurrent-mode-reference.md","slug":"docs/concurrent-mode-reference.html"}}},"pageContext":{"slug":"docs/concurrent-mode-reference.html"}},"staticQueryHashes":[]}