React — это библиотека пользовательского интерфейса JavaScript с открытым исходным кодом, разработанная Facebook, она завоевала большую популярность в сообществе разработчиков интерфейса.

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

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

Итак, давайте погрузимся в новые функции и обновления React 18.

1. Внедрение нового корневого API

Корень — это указатель на структуру данных верхнего уровня, используемую React для отслеживания рендеринга дерева. В устаревшем корневом API (ReactDOM.render) корень был непрозрачен для пользователей, поскольку мы прикрепляли его к элементу DOM, и доступ к нему осуществлялся с помощью узла DOM без его раскрытия. пользователям. Однако нам не нужно хранить корень в узле DOM.
У устаревшего Root API есть некоторые проблемы с запущенными обновлениями, например, нам нужно продолжать передавать контейнер в рендеринг, даже если он никогда не изменения. Добавление нового корневого API устраняет эту проблему, поэтому нам больше не нужно передавать контейнер в рендеринг.
Кроме того, изменения в корневом API позволяют нам удалитьгидрат и замените его параметром в корне, аналогичным образом он изменяет способ работы обратного вызова рендеринга. Подробнее см. обсуждение на GitHub.

2. Улучшение автоматической пакетной обработки

Пакетная обработка — это не что иное, как объединение нескольких обновлений состояния React в одно состояние рендеринга для повышения вычислительной производительности.
В более ранней версии React пакетная обработка выполнялась только для обработчиков событий React. Однако в случае любых других событий, таких как асинхронные обновления состояния, обновления внутри промисов, установленные тайм-ауты и обновления собственных обработчиков событий, по умолчанию в React не выполняется пакетная обработка.
Проблема решается путем добавления автоматической пакетной обработки в React 18. с помощью Root API, теперь все обновления будут автоматически группироваться независимо от их происхождения.
Кроме того, вы можете отказаться от пакетной обработки с помощью ReactDOM. flushSync(), в некоторых случаях вам нужно немедленно прочитать что-то из DOM после изменения состояния.
Подробную информацию см. в разделе Обсуждение React 18 Github.

3. Новый API Start Transition, чтобы ваше приложение оставалось отзывчивым

Одним из наиболее значительных обновлений React 18 является введение API startTransition, который поддерживает отклик вашего приложения даже во время обновлений на большом экране.
Иногда во время тяжелых операций обновления , ваше приложение перестало отвечать на запросы, API startTransition может оказаться очень полезным для обработки таких ситуаций.
API позволяет пользователям управлять аспектом параллелизма для улучшения взаимодействия с пользователем. Это делается путем переноса тяжелых обновлений в startTransition и будет прервано, только если будут инициированы более срочные обновления. Таким образом, он фактически классифицирует срочные обновления и медленные обновления.
Если переход прерывается действиями пользователя, React отбрасывает устаревшую работу по рендерингу, которая еще не завершена, и будет отображать только последнее обновление.
Дополнительную информацию см. в разделе Обсуждение React 18 на GitHub.

4. Новый Suspense SSR, архитектурные улучшения

В React 18 добавлено архитектурное улучшение рендеринга на стороне сервера. Рендеринг на стороне сервера генерирует HTML из компонентов реакции на сервере и отправляет его обратно клиенту, поэтому клиент теперь может видеть содержимое страницы до загрузки и запуска пакета JavaScript.
Что ж, у SSR есть недостаток. ,

  1. Это не позволяет компонентам ждать данных. Это означает, что перед рендерингом HTML клиенту вы должны подготовить данные для компонентов на сервере.
  2. Вам необходимо загрузить JavaScript для всех компонентов на клиенте перед гидратацией любого из них, чтобы сделать их интерактивными.
  3. Кроме того, вам нужно дождаться, пока все компоненты увлажнятся, прежде чем взаимодействовать с ними.
    Эту проблему можно решить с помощью двух новых функций саспенса, т. е. потоковой передачи. HTML и выборочное увлажнение.
  • Потоковая передача HTML на сервер
    При потоковой передаче HTML React будет отправлять статические части компонентов пользовательского интерфейса, используя приостановку,от которой будет зависеть какая часть компонента будет загружаться дольше, а какая может быть отрисована напрямую, поэтому пользователю не нужно ждать, чтобы увидеть первоначальный рендеринг пользовательского интерфейса.
  • Выборочная гидратация на клиенте
    При выборочной гидратации компоненты, заключенные в приостановку, не будут блокировать гидратацию. Как только JS и контент загружены для каждого компонента, он начнет увлажняться, не блокируя другой компонент.

Для получения дополнительной информации см. Обсуждение React 18 GitHub.

Вывод:

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

Используете ли вы React js при разработке приложений?

Попробуйте DhiWise – платформа ProCode для разработки веб-приложений и мобильных приложений, позволяющая быстрее вывести ваше приложение на рынок.

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

Узнайте больше о DhiWise и зарегистрируйтесь сегодня, чтобы ускорить разработку своего приложения.