Новая версия React принесла с собой ряд изменений и улучшений, таких как автоматическое пакетирование, новые API, такие какestartTransition, потоковая передача SSR и новая поддержка Suspense.
Большинство из этих функций поддерживаются новым существенным новшеством: «параллельным рендерингом». Внутреннее изменение, позволяющее разработать новые мощные функции для разработчиков приложений и библиотек.
Давайте рассмотрим, что это за новые функции и улучшения, и разберемся, что каждая из них означает.
Что такое «Concurrent React»?
Это основная особенность всех изменений, добавленных в React 18, это то, что находится под капотом, обеспечивая новые разработки, но что это такое?
Что такое параллелизм?
Параллельность означает, что две или более задач могут накладываться друг на друга, представьте себе телефонный звонок, он не является параллельным, поскольку вы можете принимать только один звонок за раз, но также можно перевести один звонок в режим ожидания, принять второй звонок на определенное время и вернуться к первому звонку.
Или, как выразился Дэн Абрамов в следующем изображении:
Этот пример служит для того, чтобы сразу исключить и уточнить, что параллелизм не означает, что вы можете выполнять две или более задач одновременно, а скорее, что в любой момент времени вы можете заниматься двумя или более задачами (вызовами в примере), выбирая, какую из них выполнить.
Как указано в анонсе React 18, параллелизм не является самостоятельной функцией. Это закулисный механизм, который позволяет React подготавливать несколько версий пользовательского интерфейса одновременно. Деталь реализации.
Это означает, что как разработчик приложений React вы не увидите непосредственно, как работает или был реализован параллелизм, но скорее вы увидите эффекты, которые он дает через новые API или улучшение производительности.
Исходя из примера с телефонным звонком, когда вы разговариваете по телефону и получаете второй звонок, который считаете срочным, вы можете перевести первый звонок в режим ожидания, то есть прервать выполнение первой задачи.
Это прерывание является ключевым свойством параллелизма в React: рендеринг прерывается. До этой реализации, как только начинается рендеринг, ничто не может прервать его, пока пользователь не увидит результат на экране.
С новой реализацией (и как только вы ее «включите») React может начать рендеринг дерева компонентов, приостановиться в середине процесса для выполнения другой задачи (рендеринга другой части дерева компонентов) и продолжить позже.
React гарантирует, что интерфейс останется последовательным и синхронизированным, даже если рендеринг будет прерван.
Более прямым примером является использование useState. До сих пор React мог работать только над обновлением одного состояния за раз, т.е. все изменения состояния считаются «срочными». Но теперь, благодаря новому процессу параллелизма и таким API, как startTransition, вы можете помечать переходы состояний как «несрочные», позволяя другим более важным операциям иметь приоритет.
Что такое саспенс?
Долгожданная функция «Саспенс» была впервые представлена в презентации Дэна Абрамова на JSConf Iceland 2018.
Теперь (наконец-то) в React 18 вы можете использовать Suspense для получения данных через такие фреймворки, как Relay, Next.js, Remix и др.
Но что это такое?
Представьте себе компонент, которому необходимо выполнить асинхронную задачу перед отображением, например, получить данные из какого-либо API.
До появления Suspense этот компонент оставался в состоянии «загрузки» (например, isLoading = true) и отображал какой-либо резервный компонент (например, отображал Loader).
То есть компонент сам заботится о том, чтобы показать в интерфейсе, что он чего-то ждет.
Теперь с помощью Suspense компонент (назовем его DataLoader) может во время рендеринга предупредить, что он еще не готов, что не хватает данных, и остановить рендеринг до завершения операции выборки.
React получит это предупреждение и использует ближайший компонент Suspense в дереве компонентов для развертывания резервного копирования в ожидании завершения работы компонента DataLoader).
Другой способ объяснить это — сослаться на блок try/catch, но для состояний нагрузки. Когда компонент сообщает, что он «еще не готов», событие, которое происходит во время рендеринга «попытки» (try), блок nearestSuspense (catch) отображает fallback. Затем, когда обещание разрешается, рендеринг компонента «повторяется» или «возобновляется».
Что такое автоматическое дозирование?
Новая возможность или изменение, которое несет с собой React 18, — автоматическое пакетирование.
Пакетная обработка — это когда React группирует несколько обновлений состояния вместе и выполняет их за один повторный рендеринг.
До этого изменения, единственная часть, где выполняется пакетная обработка изменений состояния, это внутри обработчиков событий, таких как onClick, т.е. изменения состояния внутри обещаний и нативных обработчиков событий, они не выполняются пакетно, но теперь они будут выполняться.
// Antes: El componente se renderizará dos veces, una vez por cada llamada a `setState`
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
}, 1000);
// Ahora: El componente se renderizará solo una vez
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
}, 1000);,
Что такое государственные переходы?
Это новая концепция в React, концепция, которая позволяет различать срочные и несрочные обновления состояния.
Примером может служить следующее:
- Срочно: Изменение ввода (пользователь набирает текст), нажатие на кнопку, перетаскивание элемента и т.д. Обычно взаимодействие с пользователем.
- Переход: переход от одного представления или представления пользовательского интерфейса к другому.
Классическим примером такой функции является интерфейс поиска, где есть ввод, который позволяет пользователю набрать текст, и список результатов.
Этот интерфейс выполняет поиск немедленно, т.е. пока пользователь набирает ввод.
Пользователь ожидает, что он/она сможет быстро ввести то, что он/она ищет, и что результат появится «в кратчайшие сроки», пока он/она набирает текст.
До сих пор для достижения этого эффекта использовались такие техники, как дебаунсинг, теперь же с новыми API, предоставляемыми React, этого эффекта — разрешения немедленного набора текста и получения небольшого дефайна при переходе в список поиска — можно добиться, пометив изменение как «переход».
import {startTransition} from 'react';
// Urgente: Mostrar inmediatamente lo que se esta escribiendo
setInputValue(input);
// Marcar los otros cambios de estados como transición
startTransition(() => {
/ / Transicion: Mostrar los resutlados
setSearchQuery(input);
});
Это означает, что изменения пользовательского интерфейса, запрашиваемые setSearchQuery, помечаются как несрочные и могут быть прерваны.
Дебаунсинг — это стратегия для обработки ситуаций, которые «случаются слишком часто», например, при вводе данных. Идея заключается в том, чтобы запускать поиск каждый раз, когда пользователь набирает ввод, но набор текста — это быстрый процесс, а поиск может занять время. Эта техника позволяет «подождать», пока пользователь сделает паузу, прежде чем выполнить основную задачу.
Новые крючки
React 18 вводит новые хуки, которые позволяют правильно обрабатывать новые возможности, предлагаемые этими хуками:
useId.
Этот хук позволяет генерировать уникальные идентификаторы как на клиенте, так и на сервере, чтобы избежать проблем в процессе гидратации. Его использование важно, так как это позволяет новым возможностям потоковой передачи HTML работать должным образом.
ВАЖНО Этот хук не предназначен для генерации значений
keyиз списка. Для этого вы должны использовать информацию из ваших данных. Я приглашаю вас прочитать больше о том, как работает propkey, в этой статье для Frontend School.Гидрирование — это процесс, используемый при выполнении рендеринга на стороне сервера (SSR), поскольку процесс рендеринга компонентов выполняется в два этапа: (упрощенно).
Отправляется неинтерактивный HTML, отрисованный на сервере.
Интерактивность добавляется/вставляется после того, как javascript завершит загрузку.
useTransition
Этот хук вместе с startTransition позволяет пометить изменения состояния как несрочные.
Изменения состояния по умолчанию считаются срочными. React позволит состояниям, помеченным как несрочные, прерываться при возникновении срочных изменений.
useDeferedValue
Это аналогичная реализация стратегии debouncing, позволяющая отложить отрисовку несрочных частей пользовательского интерфейса. Этот рендеринг не прерывается и не блокирует действия пользователя.
useSyncExternalStore.
Этот хук позволяет системам управления состоянием, внешним по отношению к React, поддерживать одновременное чтение, заставляя изменения в этом хранилище быть синхронными. Вам больше не нужно использовать useEffect для реализации подписки на внешние источники данных.
Как сказано в документации, этот хук предназначен для использования библиотеками управления состоянием, а не непосредственно в коде приложения.
useInsertionEffect
Этот хук позволяет библиотекам CSS-in-JS улучшить некоторые аспекты процесса внедрения стиля. Этот хук будет выполнен после манипуляций с DOM, но до того, как эффекты макета прочитают изменения.
Это хук, на 100% предназначенный для разработчиков библиотек CSS-in-JS.
Заключение
В целом, это самые важные изменения в React, следующим шагом будет миграция вашего приложения на React 18 и начало реализации необходимых изменений, чтобы принять и использовать преимущества новых функций, таких как Suspense и переходы.
Более подробную информацию вы можете найти в этой ссылке на одно из обсуждений рабочей группы по реакциям.
✉️ Únete a Micro-bytes 🐦 Sígueme en Twitter ❤️ Apoya mi trabajo