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

Внимание:

\n

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

\n

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

\n
\n
\n\n

Установка

\n

Конкурентный режим доступен только в экспериментальных сборках React. Чтобы установить их, выполните:

\n
npm install react@experimental react-dom@experimental
\n

Для экспериментальных сборок нет гарантий семантического версионирования

\n

В любом релизе с версией @experimental функции API могут быть добавлены, изменены или удалены.

\n

Экспериментальные релизы будут часто содержать критические изменения.

\n

Вы можете пробовать такие сборки в личных проектах или в ветках, однако мы не рекомендуем использовать их в продакшене. В Facebook мы используем их в продакшене, поскольку можем исправлять ошибки, если что-то сломается. Мы вас предупредили.

\n

Для кого предназначен этот экспериментальный релиз?

\n

Этот релиз предназначен в первую очередь для ранних пользователей, авторов библиотек и интересующихся.

\n

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

\n

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

\n

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

\n

С конкурентным режимом другая история. В нём изменена сама суть работы React. В противном случае использование новых возможностей было бы невозможно. Именно поэтому они объединены в новый «режим», а не выпускаются по-отдельности.

\n

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

\n

Включение конкурентного режима для всего дерева <App />:

\n
import ReactDOM from 'react-dom';\n\n// Раньше вы использовали:\n//\n// ReactDOM.render(<App />, document.getElementById('root'));\n//\n// Теперь для перехода в конкурентный режим нужно написать:\n\nReactDOM.unstable_createRoot(\n  document.getElementById('root')\n).render(<App />);
\n
\n

Примечание:

\n

Функции API конкурентного режима доступны только в экспериментальных сборках React.

\n
\n

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

\n

К чему готовиться?

\n

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

\n

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

\n

Этап миграции: блокирующий режим

\n

Для старых проектов путь перехода на конкурентный режим может оказаться достаточно длинным. Поэтому в экспериментальных сборках React мы предусмотрели новый «блокирующий режим». Вы можете попробовать его, заменив createRoot на createBlockingRoot. Блокирующий режим предоставляет сокращённый набор возможностей конкурентного режима. При этом он ближе к тому, как работает React в настоящее время, и может послужить в качестве промежуточного этапа.

\n

Итого:

\n\n

Зачем столько режимов?

\n

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

\n

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

\n

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

\n

Сравнение возможностей

\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Старый режимБлокирующий режимКонкурентный режим
Строковые рефы✅🚫**🚫**
Старый контекст✅🚫**🚫**
findDOMNode✅🚫**🚫**
Задержка✅✅✅
SuspenseList🚫✅✅
Задержка в React на сервере + гидратация🚫✅✅
Последовательная гидратация🚫✅✅
Выборочная гидратация🚫🚫✅
Кооперативная многозадачность🚫🚫✅
Автоматическая группировка при множественном вызове setStates    🚫*✅✅
Приоритетный рендеринг🚫🚫✅
Прерываемый предварительный рендеринг🚫🚫✅
useTransition🚫🚫✅
useDeferredValue🚫🚫✅
Периодические задержки типа «Train»🚫🚫✅
\n
\n

*: Старый режим имеет автоматический пакетный рендеринг для обрабатываемых React событий, но он ограничен одним потоком браузера. Не React-события должны быть обработаны через unstable_batchedUpdates. В блокирующем и конкурентном режимах все вызовы setState группируются для пакетного рендеринга по-умолчанию.

\n

**: Предупреждения в режиме разработки.

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