Глубокое погружение в реальное применение функций
Введение
React 18 — это значительное улучшение механизмов рендеринга React. Основное внимание уделялось повышению производительности пользовательских интерфейсов для улучшения взаимодействия пользователя с веб-сайтом.
Недавно добавленные функции полностью ориентированы на пользователя, чтобы пользователи не ждали слишком долго, прежде чем взаимодействовать с веб-сайтом, что означает значительно меньший показатель отказов на сайте, большую конверсию потенциальных клиентов и увеличение доходов для бизнеса. Это беспроигрышный вариант для пользователей и бизнеса, все довольны и мир от этого становится лучше😀.
Миграция на React 18
Обновление до React 18 применимо только к проектам React, созданным до выпуска React 18. Проектам, созданным после выпуска React 18, не нужно беспокоиться об обновлении вручную, поскольку проект React автоматически получит новые функции React 18.
Начнем с того, что React и ReactDOM должны быть переустановлены в проекте, чтобы получить новые API и механизм параллельного рендеринга (мы поговорим об этом достаточно скоро), которые поставляются с React и ReactDOM.
Чтобы начать пользоваться новыми блестящими функциями, которые были включены в React 18, нам нужно добавить в проект новый корневой API. Новый корневой API — это основная функция, которая представляет механизм параллельного рендеринга, который, по моему мнению, является самой крутой вещью в обновлении React 18.
В обсуждениях Рика Хэнлона о различиях между двумя корневыми API говорилось, что Legacy Root API — это API, который мы использовали для создания корневой версии нашего веб-приложения до React 18, а New Root API — это обновленный API, который представляет наиболее эффективную и функциональную производительность механизма рендеринга проектов React.
Корень в React подобен контейнеру, в котором находятся все элементы/узлы/компоненты проекта React. Это структура данных верхнего уровня, которая служит точкой отсчета, от которой происходят остальные компоненты дерева DOM.
Параллельный рендеринг
Согласно словарю Merriam-Webster, параллельное означает действующее или происходящее в одно и то же время.
Параллельный рендеринг — это механизм рендеринга, в котором срочные действия пользователя (такие как щелчок и ввод текста) являются приоритетными в процессе рендеринга пользовательского интерфейса. Это означает, что любая менее срочная задача в пользовательском интерфейсе может быть прервана и приостановлена в процессе рендеринга, в то время как более срочная задача имеет приоритет.
Краткое объяснение параллелизма Дэна Абрамова — идеальная аналогия для понимания этого рабочего процесса. Представьте себе этот сценарий; вы разговариваете со своим другом, и неожиданно ваш начальник прислал сообщение, тон этого сообщения кажется срочным. Босс нуждается в некоторой информации, отправленной ей немедленно. Ну, что ты делаешь? Вы говорите своему другу подождать, потому что вам нужно отправить что-то срочное вашему боссу. Через несколько мгновений вы выполнили задание, которое запросил ваш начальник, и продолжили болтать со своим другом.
Параллелизм в этом контексте позволяет вам отложить разговор с другом и ответить начальнику, что является эффективным способом одновременного общения с несколькими сторонами. С другой стороны, непараллельность гарантирует, что вы завершите разговор со своим другом, прежде чем ответить своему боссу, что не идеально. Я могу заверить, что этот образ действий может привести к тому, что вас уволят.
Сообщения, отправляемые в этом случае, представляют собой обновления состояния, которые происходят за кулисами, например, веб-сайт загружает все узлы DOM в дереве компонентов, и пользователь хочет перейти к контактная страница из панели навигации, это последнее действие пользователя будет иметь приоритет над рендерингом дерева компонентов в данный момент, процесс рендеринга будет прерван, и веб-сайт соответствующим образом отобразит контактную страницу.
Дебют параллелизма привел к раскрытию функции перехода, когда функция перехода реализована.
Переходы
Переходы — это масштабное обновление React для обработки медленных пользовательских взаимодействий в пользовательском интерфейсе из-за высокой задержки в сетевом соединении конечного пользователя или сложности и большого размера пакетов данных, которые проходят через уровень соединения TCP (протокол управления передачей). .
При этом важно понимать, насколько большую проблему решают переходы. До React 18 процесс рендеринга обновлений состояния выполнялся движком React без разбора. Однако с дебютом механизма параллельного рендеринга, как мы обсуждали ранее, переходы могут работать идеально, поскольку функция перехода была создана для работы с параллелизмом.
React 18 теперь предоставляет API под названием startTransition. Этот API предоставляет возможность устанавливать приоритет срочности взаимодействия с пользователем в пользовательском интерфейсе. Действия пользователей, такие как щелчок, ввод текста или нажатие, могут иметь приоритет как срочные по сравнению с менее срочными задачами, такими как изменения пользовательского интерфейса, такие как отображение результатов поиска.
Например, вы посещаете веб-сайт, на котором отображаются вакансии по разработке программного обеспечения, и решаете искать фронтенд-вакансии, промежуточные роли, а также удаленные и гибридные вакансии. Допустим, эти фильтры представлены в пользовательском интерфейсе в виде флажков. Когда вы нажимаете на эти флажки, вы ожидаете, что они отреагируют, отобразив галочку в поле, хотя для отображения результатов поиска может потребоваться несколько секунд.
startTransitionAPI помогает улучшить работу пользователя с пользовательским интерфейсом, делая его взаимодействие интуитивно понятным. Представьте, что вы пытаетесь открыть приложение Twitter на своем телефоне, в тот момент, когда вы нажимаете на приложение, вы ожидаете, что оно отреагирует, отобразив заставку, в этот момент вы ожидаете, что отображение содержимого пользовательского интерфейса займет некоторое время.
Однако, с другой стороны, если вы нажмете на приложение, потребуется некоторое время, чтобы отобразить всплеск или какую-то визуальную обратную связь, чтобы подтвердить действие касания, вы предположите, что ваш телефон завис, верно? Бьюсь об заклад, если только приложение Твиттера продолжит действовать таким образом, то вскоре вы удалите его со своего телефона.
Это проблема, которую решает переход, гарантируя, что пользовательский интерфейс не зависнет из-за ответа на несколько обновлений состояния в зависимости от действий пользователя. Чтобы использовать функцию перехода, оберните менее срочные задачи, такие как переходы пользовательского интерфейса из одного представления в другое, в функцию startTransition.
Допустим, мы хотим создать страницу, на которой могут отображаться книги, поступающие с URL-адреса API. На этой странице будет поле поиска, в котором введенное значение будет фильтровать список книг, отображаемых на странице. Теперь предположим, что объем данных, поступающих от API, огромен, а сетевое соединение (получение данных с сервера, на котором хранится API) очень медленное. Это означает, что пока пользователь печатает в поле ввода, буквы будут появляться медленно.
Это связано с тем, что механизм React одновременно отображает как обновление состояния запроса фильтра, так и переход пользовательского интерфейса на основе символов, введенных во входные данные. Это приведет к отставанию в производительности веб-страницы, разработчики всегда справлялись с этим в прошлом с помощью устранения дребезга и дросселирования. Но даже с учетом этих концепций обновления состояния все равно будут занимать определенное время (в зависимости от значения задержки setTimeout), прежде чем действие пользователя отобразится на странице. Такая задержка очень важна, независимо от того, насколько она короткая. Пользователь думает, что веб-страница не работает.
В нашем случае все, что нам нужно сделать, это просто обернуть код, который фильтрует списки книг, с помощью startTransition.
Теперь вы можете задаться вопросом, как вы можете показать пользователю визуальную подсказку о том, что запрошенные им данные уже в пути и загружаются в фоновом режиме. React 18 предоставляет еще одну функцию под названием isPending, которую мы можем извлечь из API хука useTransition вместе с startTransition.
С помощью API-интерфейса useTransition мы вытащили isPending, а затем реализовали условный рендеринг для обработки ситуаций, когда фильтрация обработка или извлечение данных из API на серверной части может занять некоторое время. Функция Ожидает в основном предназначена для оптимизации работы пользователей, чтобы им не приходилось задумываться о том, что происходит в фоновом режиме.
useId
API-интерфейс useId был создан главным образом для того, чтобы помочь разработчикам создавать более доступные веб-сайты для более инклюзивного использования веб-сайтов. Также для решения проблемы несоответствия клиентского и серверного рендеринга дерева компонентов.
Когда React отображает пользовательский интерфейс для пользователя, он работает с процессом, называемым гидратация, это означает, что сервер выдает компоненты в виде сухого HTML, а затем клиент (браузер) увлажняет HTML водой. интерактивности через обработчики событий из JavaScript. Чтобы эта гидратация работала должным образом, вывод пользовательского интерфейса в браузере должен совпадать с выводом HTML с сервера. useId помогает решить эти проблемы до React 18.
С помощью useId мы можем генерировать уникальные идентификаторы для атрибутов доступности всякий раз, когда мы имеем дело с элементами управления формы.
Свойство htmlFor в элементах label помогает пользователям программы чтения с экрана легко получать доступ к полям формы, поскольку программа чтения с экрана будет читать вслух метку, когда пользователь фокусируется на поле ввода. . Чтобы убедиться, что две группы меток/ввода не имеют одинаковых идентификаторов, мы реализуем хук useId.
useId также используется для создания уникального значения идентификатора для реквизита aria-describedby, что позволяет нам предоставить подробная и наглядная информация о поле ввода пароля для пользователей программ чтения с экрана. Значение идентификатора, возвращаемое из useId, выглядит примерно так: :r1: или :r2:
И последнее: не делайте ошибки, используя значение useId в качестве замены для создания ключей в списке.
использованиеDeferredValue
useDeferredValuehook API — это еще одна функция, которая работает аналогично startTransition и относится к корректной обработке обновлений состояния. для оптимизации пользовательского опыта. useDeferredValue принимает любое переданное ему значение в качестве аргумента, возвращает предыдущее состояние значения, пока процесс рендеринга выполняется в фоновом режиме, а затем отображает новое состояние значения в пользовательский интерфейс в момент завершения процесса рендеринга.
Он откладывает отображение нового состояния до завершения рендеринга, пока происходит рендеринг, он показывает пользователю предыдущее состояние. Это отложенное значение может активировать визуальную обратную связь для пользователя, чтобы отслеживать отрисовку, происходящую в фоновом режиме.
useDeferredValue может показаться очень похожим на startTransition, но есть одно важное отличие:
- startTransition используется при запуске обновления (т. е. setState) на основе изменения события, которое наш код может например onClick, onChange, onFocus
- useDeferredValue используется при получении новых данных от родительского компонента или на основе изменения события, контролируемого внешним хранилищем, например изменения запроса или параметра URL.
Автоматическое дозирование
Пакетная обработка в React помогает сгруппировать два или более обновления состояния в один повторный рендеринг. Это значительно повышает производительность проектов React, в конечном итоге оптимизируя взаимодействие с пользователем.
В React 17 несколько обновлений состояния группируются только при размещении в обработчиках событий, все, что находится за пределами обработчиков событий React, не группируется, что привело бы к ненужным повторным рендерингам. React 18 решает эту проблему, автоматически группируя любой набор обновлений состояния в повторную визуализацию одним махом.
Представьте себе сценарий, в котором вы пошли в ближайший продуктовый магазин, чтобы купить молоко, вы вернулись домой и сразу же, придя домой, вспомнили, что забыли купить яйца, а затем, вернувшись домой, вы снова забыли купить пасту с арахисовым маслом. . Я думаю, мы все можем согласиться с тем, что ходить туда и обратно в продуктовый магазин в течение одного дня довольно неэффективно и непродуктивно. Однако, скажем, перед тем, как отправиться в магазин, вы решили сесть и записать все предметы, которые вам нужно приобрести на этот день или на следующий. После этого вы направляетесь в магазин с высоко поднятой головой, уверенной в том, что вы хотите, и в вашем списке товаров. Это сэкономит вам время, деньги и энергию на поездки туда и обратно.
Это та же концепция, что и автоматическая пакетная обработка, и проблема, которую она решает, а именно предотвращение повторного рендеринга впустую.
саспенс
В React 18 было значительно улучшено то, как работает функция компонента ‹Suspense/›. Теперь он предназначен не только для разделения кода с помощью React.lazy, но и для интеграции с недавно улучшенной архитектурой рендеринга на стороне сервера (SSR) для React.
‹Приостановка/› теперь используется для решения критических проблем в процессе рендеринга на стороне сервера, который включает:
- Получить данные для всего приложения с сервера.
- Отобразите эти данные в HTML и отправьте их в ответе.
- Загрузите код JavaScript из клиента для всего приложения.
- Подключите логику JavaScript к сгенерированному сервером HTML для всего приложения (это гидратация).
Чтобы весь процесс, описанный выше, работал гладко, каждый шаг должен быть завершен до того, как можно будет начать следующий шаг. В таких случаях это повлияет на UX, что создаст своего рода узкое место во всей операции. Именно здесь ‹Suspense/› помогает решить эту проблему SSR. Он делает это, разбивая каждую стадию в потоке на части, чтобы следующей стадии не приходилось полагаться на предыдущую стадию для выполнения своей части в потоке.
В React 18 благодаря ‹Suspense/› доступны две важные функции SSR:
- Потоковая передача HTML на сервер.
- Выборочная гидратация на клиенте.
Потоковая передача HTML на сервер просто означает, что сервер будет продолжать отправлять данные в формате HTML клиенту (браузеру), даже если некоторые компоненты всего приложения могут испытывать задержку при передаче из-за медленной базы данных или Слой API, который может быть вне вашего контроля. Допустим, мы создаем приложение, которое отображает сообщение с комментариями, поэтому вместо ожидания сбора всех данных для приложения на сервере перед отправкой любого HTML-кода клиенту. Мы можем решить реализовать функцию SSR ‹Suspense/›, которая передает HTML-вывод с сервера клиенту для отображения в пользовательском интерфейсе, в то время как компонент комментария может быть извлечен в фоновом режиме и заменен Резервный заполнитель Spinner, пока все данные комментариев не станут доступны для просмотра пользователем.
Обертывание компонента комментариев с помощью функции ‹Приостановка/› помогает нам сохранить лицо от наших пользователей, что гарантирует, что они вернутся, чтобы просмотреть больше сообщений в нашем веб-приложении 👌.
Выборочная гидратация позволяет вашим пользователям начать взаимодействовать с компонентами на вашем веб-сайте, даже если код JavaScript для некоторых компонентов может быть еще недоступен. Это предотвращает неловкие ситуации, когда пользователям приходится ждать, пока ваше веб-приложение завершит весь процесс рендеринга, прежде чем они смогут начать взаимодействовать с ним.
С помощью ‹Suspense/› браузер может выборочно увлажнять любой компонент, чей код JavaScript доступен, и увлажнять простой вывод HTML с помощью функций и обработчиков событий, которые оживляют приложение. В тот момент, когда код JavaScript для компонента комментариев становится доступным, браузер начинает увлажнять компонент для интерактивности веб-приложения.
Заключение
Выпуск React 18 уже меняет правила игры в том, как разработчики создают цифровые продукты, и в качестве опыта для пользователей. Престижность всем участникам и сопровождающим этой фантастической библиотеки, они позаботились о том, чтобы ничего не было убрано из DX (опыт разработчика) и UX (пользовательский опыт), и вместо этого добавили к ней гораздо больше.
Механизм параллельного рендеринга, автоматическая пакетная обработка и улучшение архитектуры SSR доказывают, что React становится все умнее и лучше по мере своего развития. Я здесь для роста React.
Теперь позвольте мне приступить к концептуализации захватывающего проекта, который будет наслаждаться всеми радостями, которые React 18 приносит в сети 😉.
Создавайте приложения с повторно используемыми компонентами, такими как Lego.
Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.
Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.
Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:
