Самая последняя версия React v18.0 была опубликована в марте 2022 года. Она содержит массу интересных новых функций. Как ведущая компания-разработчик ReactJS, наша команда в восторге от этого обновления. Вокруг новых версий React часто возникают споры, и эта ничем не отличается. Тем не менее, эта версия оказалась довольно большой в отношении нестандартных идей с точки зрения функций. Передовой библиотекой внешнего интерфейса восхищаются за ее постоянное стремление к совершенствованию и инновациям. React 18 не разочаровывает нас в этом отношении. Кроме того, основное внимание React, как всегда, уделялось повышению производительности. Самые большие новые функции, представленные в React 18, как правило, демонстрируют повышение производительности. В частности, движок рендеринга был обновлен с большим приоритетом.

Давайте приступим к подробностям обо всех новых функциях в React версии 18.0 без дальнейших представлений.

Что добавил React 18?

Основываясь на новых возможностях и общих улучшениях моделей рендеринга, React 18 имеет массу новых обновлений. React Labs работает над некоторыми революционными изменениями в библиотеке. Благодаря этому React v18.0 имеет одни из самых интригующих новых функций.

Из них наиболее захватывающими являются Concurrent React и Suspense. Мы хотели бы углубиться в обе эти вещи. Начнем с того, что наиболее значительными улучшениями в этом издании являются Автоматическая пакетная обработка и переходы. Кроме того, Suspense и Concurrent получили некоторые улучшения интеграции. Для простоты внедрения также были введены несколько дополнительных крючков.

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

Параллельная реакция

Давайте сначала разберемся с параллелизмом. Что такое параллелизм с точки зрения программирования? Возможность одновременного запуска нескольких программ или нескольких частей программы называется параллелизмом.

Concurrent React, новая функция React версии 18.0, призвана кардинально изменить способ обработки параллелизма.

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

Параллельные преимущества React

Как Concurrent React делает наши приложения лучше? Основная особенность Concurrent React заключается в том, что он позволяет прерывать рендеринг. Мы обычно связываем прерывание с чем-то плохим, но здесь оно приносит большую пользу. Возможность прерывания предполагает, что теперь React может запускаться, останавливаться и возобновлять работу во время рендеринга обновления. Он может даже принять решение не продолжать работу над рендером, который уже находится в работе. Как это помогает? Это позволяет React гарантировать, что пользовательский интерфейс останется согласованным, даже если рендеринг остановится. Другими словами, Concurrent React улучшает наши приложения, предоставляя React возможность расставлять приоритеты для компонентов. Давайте поговорим об этом немного подробнее.

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

Как я уже упоминал, мы увидим усилия, направленные на то, чтобы сделать внедрение React 18 безболезненным, почти во всех новых обновлениях React 18. Для React Concurrent также основной упор сейчас делается на плавный переход более традиционных возможностей реагирования. интегрироваться с одновременным. У нас достаточно места для постепенного использования Concurrent в наших программах. Вы можете выборочно включить Concurrent для некоторых частей вашей программы, используя ‹StrictMode›.

саспенс

Приостановка — это долгожданная функция, которая, наконец, была добавлена ​​в React в React 18. В предыдущих версиях React были небольшие сегменты функции приостановки, поскольку React Lab хотела опробовать ее в меньшем масштабе, прежде чем выпустить ее как комплексную функцию. Дополнительные обновления будут добавлены в Suspense в будущих младших обновлениях версии React 18.

Что делает саспенс? В React v18.0 Suspense может извлекать данные из специализированных фреймворков, таких как Next.js Relay, Remix или Hydrogen. Здесь важно отметить, что даже если это технически возможно, не рекомендуется использовать приостановку для глобальной выборки данных. Причина, по которой Suspense так долго ждали, заключается в том, что получение данных из других библиотек и фреймворков крайне необходимо для создания хорошего приложения. Это дает разработчикам большую свободу и гибкость. Suspense упрощает задачу импорта из других фреймворков. Неудивительно, что мы так взволнованы Suspense!

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

Suspense — это больше, чем сбор данных. С помощью React.lazy приостановку также можно использовать для разделения кода в более старых версиях React. Да, вы правильно догадались, это помогает в принятии React 18. Цель состоит в том, чтобы расширить Suspense для управления всеми асинхронными задачами, такими как загрузка данных, кода и графики.

Компоненты сервера

Как я уже говорил ранее, серверные компоненты еще не представлены. Тогда почему мы говорим об этом здесь, если этого нет в React 18? Потому что очень скоро он будет доступен как подрывная версия React 18, возможно, как 18.1. Ожидается, что серверные компоненты произведут революцию в рендеринге серверного движка, и, честно говоря, мы не можем сохранять спокойствие.

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

Как это сделать? Серверные компоненты могут сочетать повышенную эффективность традиционного серверного рендеринга с надежным взаимодействием клиентских приложений. Кроме того, мы можем ожидать хорошей совместимости между серверными компонентами и параллельными функциями, такими как потоковый рендеринг сервера.

Автоматическое дозирование

Пакетная обработка сама по себе является довольно важной функциональностью React. Чтобы повысить производительность кода, React использует пакетную обработку. Нужно знать, что такое пакетирование? Что ж, в обработчиках событий React пакетная обработка — это процесс объединения множества обновлений состояния в один повторный рендеринг. Новое автоматическое пакетное обновление в React 18 выполняет, как следует из названия, автоматическую пакетную обработку. Теперь можно автоматически пакетировать изменения событий в setTimeout, promises и собственных обработчиках событий.

Переходы

Эта функция огромна с точки зрения улучшения рендеринга пользовательского интерфейса. Давайте сразу разберемся, что делает функция «Переход» и как она может облегчить нашу жизнь.

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

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

Чтобы различать срочные и несрочные обновления, мы можем использовать API startTransition. Обновления startTransition будут рассматриваться React как несрочные. Когда появится важное обновление, оно приостановит эти обновления. React будет отбрасывать более ранние рендеры и отображать только самое последнее обновление в ответ на такие сбои.

На данный момент совершенно ясно, что, как и другие функции, переходы также были введены с учетом более легкого внедрения этой функции. По этой причине для переходов доступны два хука:

Переходные крючки

  • useTransition: для только что начавшихся переходов, в том числе для значений, которые отслеживают состояния ожидания.
  • startTransition: когда хук useTransition недоступен, мы должны использовать startTransition для инициации переходов.

Здесь, вероятно, важно отметить, что новые функции React 18 взаимозависимы в нескольких точках. Например, в случае с переходами параллельная отрисовка делает возможными переходы, поскольку позволяет прерывать обновления. Пользователь получит самый последний контент в случае повторной приостановки обновления. В фоновом режиме Transition будет выполнять обновление перехода.

Мы увидим больше таких взаимозависимостей, когда будем обсуждать другие новые хуки, представленные в React 18.

Новые функции с задержкой

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

Обратите внимание, что в React 18 Suspense необходимо использовать в тандеме с API перехода. Если вы прервете React во время перехода, визуализированные данные не будут заменены резервным содержимым. Вместо этого он будет откладывать рендеринг до тех пор, пока не будет загружено достаточно данных. Таким образом можно будет избежать плохого состояния загрузки.

Переработанные клиентские и серверные API рендеринга

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

DOM-клиент

React 18 экспортирует API createRoot и hydrateRoot из react-dom/client. Если их не использовать, новые функции React 18, скорее всего, не будут работать. Оба эти API поддерживают onRecoverableError. Эта новая функция предупреждает разработчиков, когда React исправляет любые ошибки, которые могли возникнуть при рендеринге или мониторинге гидратации. React по умолчанию использовал console.error и reportError в более ранних браузерах.

  • createRoot: ReactDOM.render заменен на createRoot. Размонтировать или визуализировать новый корень через рендеринг.
  • hydrateRoot: ReactDOM.hydrate был заменен на hydrateRoot. Используя новые API-интерфейсы DOM Server, оптимизируйте работу приложений, отображаемых на сервере.

DOM-сервер

Для серверов DOM на основе API сервера react-dom/current были созданы новые API. На стороне сервера они поддерживают приостановку. Теперь, когда они доступны для React, хотя renderToString по-прежнему работает в React 18, лучше не использовать его.

  • renderToPipeableStream. В средах Node это позволяет отображать потоки в конвейерные потоки.
  • renderToReadableStream: в современных периферийных средах выполнения, таких как рабочие Cloudflare и Deno, это позволяет отображать потоки в потоки только для чтения.

Строгий режим в React 18

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

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

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

Новые крючки

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

Естественно, React 18, как и любое крупное обновление версии, должен был придумать несколько новых хуков, чтобы гарантировать бесперебойную работу всех новых функций. Новые хуки также помогают повысить адаптивность React 18. Давайте последовательно рассмотрим основные новые хуки в React 18.

идентификатор использования

С помощью useId на клиенте и сервере генерируются отдельные идентификаторы, что позволяет избежать расхождений в гидратации. Наиболее полезно при интеграции библиотек компонентов в API специальных возможностей, которым требуются уникальные идентификаторы. Новый модуль рендеринга потокового сервера React 18 транслирует HTML не по порядку, что устраняет проблему с предыдущими версиями фреймворка, такими как React 17 и 16. Тот факт, что useId не предоставляет ключи в списке, может быть уместно упомянуть в этом месте. Ваши данные должны производить ключи.

использованиеПереход

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

использованиеDeferredValue

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

использованиеSyncExternalStore

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

использованиеInsertionEffect

Используя новый хук useInsertionEffect, библиотеки CSS-in-JS могут решить проблемы с производительностью рендеринга. Это то, что вам вряд ли понадобится, пока вы не создадите библиотеку CSS-in-JS. Этот хук будет запущен после модификации DOM, но до того, как обновленный макет будет прочитан механизмом макета. Это решает проблему с React версии 17.0. Но в React v18.0 это еще важнее. Чтобы дать макету время на перезагрузку во время параллельного рендеринга, React 18 уступает браузеру.

В заключение, чего нам ждать от React?

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

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

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

Несколько еще более захватывающих сведений о будущих версиях React можно найти в последних заявлениях команды React. Компоненты React Server выпущены первыми. Кроме того, мы узнаем о преимуществах отслеживания переходов, оптимизации SSR и загрузки ресурсов. React Optimizing Compiler, анонсированный на React Conf 2021, также находится в разработке!

Загляните в раздел 4WayTechnologies, чтобы узнать больше о таком замечательном контенте.

Первоначально опубликовано на https://codipher.com 18 августа 2022 г.