Что нового в React v17 и путь к v18. React 18 что нового

В целом, мы хотим сделать переход на React18 как можно более простым. Затем вы можете работать в своем собственном темпе и одновременно начинать создавать функции.

React 18: новые хуки и как изменился рендеринг

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

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

Automatic batching

В React 18 добавлена возможность автоматически группировать обновления состояния для асинхронных операций. Например, PROMISE, TIME LIMITS и RECOVERY REQUESTS. Это положительно сказывается на производительности.

Группировка React — это процесс группировки нескольких вызовов обновления состояния в один шаг перемещения. Другими словами, пакетная обработка.

Ранее группировка происходила только в обработчиках событий.

Concurrent rendering и новые хуки

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

Новые конкурентные возможности производительности добавляют новые API: переходы состояний, функция приостановки и новые хуки.

startTransition

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

API представляет его в виде функции startTransition. В этой функции выполняется несрочное обновление состояния.

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

useTransition

В дополнение к startTransition существует новый крючок useTransition. Информирует о состоянии перехода.

useDeferredValue

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

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

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

UX для обновления версий и путь к v18

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

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

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

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

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

Например, когда выйдет React 18, обновление с такой версии, как 17, даст вам возможность выбрать полное или поэтапное обновление приложения. Если вы выберете поэтапное обновление, приложение будет обновляться по частям — например, большая часть приложения будет обновлена до версии 18, а диалоги останутся на версии 17.

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

Изменения в делегировании событий

При развертывании таких встроенных кнопок реактивно обрабатывать операторы событий.

Ванильный эквивалент JS при компиляции выглядит следующим образом

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

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

Это изменение позволяет безопасно вставлять приложения, созданные в разных версиях React, но начиная с версии 17.

Критические изменения

Эта новая версия создана благодаря нескольким важным изменениям. Команда постаралась сделать их меньше — некоторые из них просто действия, но их важно отметить. Таким образом, такие вещи, как устаревшие методы из предыдущих версий, все еще доступны.

Делегирование мероприятия

С новыми изменениями в событиях могут возникнуть проблемы.

Например, при добавлении ручного оператора c document.addeventlistener () обычно ожидается, что он будет перехватывать все события React. В предыдущих версиях React настраиваемые операторы документов получали их, даже если они вызывали распространение оператору событий, поскольку их собственные инциденты уже были на уровне документов.

В этой новой версии e.StopPropagation () действительно останавливает освобождение оператора документа.

Чтобы исправить это, преобразуйте оператор события для использования понятийной фразы, передав параметр< capture: true >В качестве третьего аргумента, напр.

Это означает, что мероприятия как никогда близки к традиционной модели DOM.

Выравнивание браузера

В систему событий React было внесено несколько изменений, некоторые из которых включают в себя

1. Предотвращение распространенной ошибки, такой как запуск при прокрутке дочерних элементов, событие onScroll больше не пузырится
2. React события onBlur и onFocus теперь переключились на внутреннее использование нативного кода событий focusin и focusout, что лучше соответствует существующему поведению React и даже предоставляет больше информации.
3. События захвата фраз, как onClickCapture сейчас, используют фактические обработчики фраз в браузере

С помощью этих нескольких изменений реакция больше соответствует поведению браузера и может даже улучшить взаимодействие.

Нет пула событий

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

Команда React назвала это изменением поведения и ничего не видела в Facebook, но называет это нарушением, так что шансы очень малы. Кроме того, E.Persist () по-прежнему доступен в объекте события, но ничего не делает.

Время очистки эффекта

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

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

Поэтому в новую версию внесен ряд изменений. Функциональность очистки эффектов будет работать асинхронно, как и все остальное, и если один элемент выключен, очистка будет активна только после обновления экрана.

Последовательные ошибки при возврате undefined

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

В основном из-за того, как легко можно непреднамеренно вернуться назад: в

Первоначально такое поведение было характерно исключительно для элементов классов и функций, но с добавлением новой версии Forward Ref и Memo это поведение стало совместимо с обычными элементами классов и функций.

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

Strict mode

Следующая особенность React 18 — улучшение строгого режима. Будет добавлена новая функция под названием «Строгие эффекты». Чтобы понять, что это за функция, вспомните, как работали строгие операции до обновления.

Обернутые аксессуары (только в режиме разработки), могут бытьУмышленное приписывание дважды за один разЧтобы избежать нежелательных побочных эффектов, которые могут быть добавлены в процессе разработки.

С выходом React 18 в StriCtMode добавляется новое поведение, Strict Effects. Это означает, что результат недавно размещенного аксессуара будет вызван дважды (Mount — >Unmount — >Mount). Дополнительные вызовы результата необходимы не только для обеспечения стабильности элемента, но и для того, чтобы быстрые обновления функционировали должным образом, когда элементы присоединяются/отсоединяются во время обновлений в процессе разработки. Он также необходим для новых разрабатываемых функций API вне экрана.

Offscreen API

Улучшение таких элементов, как виртуальная прокрутка, вкладки и т.д., а также внедрение поддержки API для браузеров -.Наглядность содержания.

Чтобы понять, как работает API off-screen, рассмотрим пример. Некоторые компоненты визуализируются в соответствии с определенными условиями. Например, текущая вкладка. Этот элемент имеет внутреннее состояние, и если вкладка изменяется, она исчезает с отключением этого элемента.

Основная цель API вне экрана — это возможность сохранить внутреннее состояние элемента, скрыв его, а не отключив. Для этого React вызывает методы жизненного цикла, такие как unmount, но в то же время поддерживает внутреннее состояние элемента и DOM-элементов. Таким образом, события ‘mount’ и ‘unmount’ могут вызываться много раз в течение жизни элемента.

Подробнее о «строгих эффектах» и внеэкранном API.Темы Github.

Root API

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

‘Маршруты’ — это показатели структур данных более высокого уровня, которые реагируют на использование React для поиска деревьев для повышения производительности, и теперь создаются отдельно. В предыдущих версиях React «маршруты» были недоступны для пользователя, соединяя React с узлом DOM, а не обратно. Новый маршрут API изменяет метод гидратации контейнера. Теперь вам нужно писать Hydrateroot вместо Hydrate.

Обратите внимание на порядок обсуждения в Hydrateroot (): принять JSX в качестве второго аргумента. Это связано с тем, что первый клиентский репродуктор является специальным и должен соответствовать дереву сервера.

Если вам нужно обновить «маршрут» приложения после гидратации, вы можете сохранить его в переменной и вызвать render().

Более подробная информация о маршрутах API в разделеТемы Github.

Конкурентный рендеринг

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

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

И Createroot, и Hydrateroot принимают новый аргумент RecovereRableError и знают, когда React восстанавливается после ошибки влажности для целей производительности и записи. По умолчанию React использует ReporterRor () или Console.Error () в старых браузерах.

React server components

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

Серверный компонент пока находится в зачаточном состоянии, но команда React планирует выпустить первую версию в небольшой версии 18.x. Тем временем они будут использовать такие фреймворки, как next.js, hydrogen и remix, чтобы улучшить свои идеи и сделать их широко применимыми.

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

Automatic batching

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

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

Метод createRoot в React 18 группирует все обновления, независимо от источника обновления. Другими словами, обновления, связанные с событиями, группируются так же, как и обновления, сделанные в событиях React.

Это инновационное изменение, но ожидайте улучшения производительности приложений из-за уменьшения количества рендеринга.

Автоматическое группирование можно отключить с помощью API flushSync.

New enhancements to Suspense on servers

Suspense — это компонент react, который позволяет сообщать о состоянии загрузки областей дерева компонентов, которые еще не готовы к отрисовке с помощью опции резервного копирования.

React 18 представляет поддержку Suspense на стороне сервера и расширяет его функциональность за счет функций одновременной производительности.

В этой версии react-dom / server API был переработан, чтобы полностью обеспечить Suspense серверными и потоковыми SSR. В рамках этих улучшений старый API потоковой передачи узлов, который не позволял Suspense постепенно перетекать на сервер, был упразднен в пользу нового API.

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