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

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

1. Новый Root API

Нам известно, как компонент <App /> обычно отображается в файле index.js на корневом элементе в файле index.html.

В React 18 нам нужно использовать метод createRoot() для создания корневого элемента, а затем визуализировать требуемый компонент, как показано ниже:

Старый способ, который использовался для рендеринга, также будет поддерживаться и будет известен как Legacy Root API.

2. Автоматическое дозирование для меньшего количества рендеров

Что такое дозирование?

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

В следующем примере представлены изменения в повторном рендеринге с введением автоматической пакетной обработки в React 18:

Автоматическая пакетная обработка по сути означает, что в случае обновления состояния внутри тайм-аутов любые обещания, собственные обработчики событий и любые другие события будут автоматически пакетироваться. Для включения этой функции необходимо использовать новый Root API, о котором упоминалось ранее.

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

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

Мы можем отказаться от пакетной обработки, используя функцию flushSync() из react-dom.

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

3. Поддержка рендеринга на стороне сервера для приостановки

Что такое рендеринг на стороне сервера?

Обычно, когда мы открываем веб-сайт, веб-браузер запрашивает страницу, затем загружается пакет JavaScript, а затем веб-страница становится видимой. Документ HTML, запрошенный при начальной загрузке, является разреженным и содержит только тег скрипта, который затем запрашивает пакет JavaScript. Пакет загружается, а затем выполняются запросы JSON, чтобы сделать веб-сайт доступным.

Следовательно, здесь мы делаем три запроса, прежде чем сможем показать пользователю какой-либо контент.

При рендеринге на стороне сервера, когда мы открываем веб-сайт, загружается файл HTML, и пользователь получает доступный для просмотра экран при начальной загрузке. (Сервер выполняет рендеринг). Таким образом, мы показываем скелет HTML на экране пользователя, пока пакет JavaScript загружается в фоновом режиме.

Когда все это будет завершено, JavaScript и HTML будут прикреплены вместе. Этот процесс известен как гидратация.

Недостатки такого подхода следующие:

  • Нам нужно получить все, прежде чем что-либо гидратировать.
  • Мы должны все гидратировать, прежде чем с чем-либо взаимодействовать. Несмотря на то, что скелет HTML загружается и отображается, компоненты не являются интерактивными.

Это решено в React 18 с помощью компонента <Suspense />.

Мы можем транслировать HTML-код до того, как будут получены все данные. Эта потоковая передача происходит в произвольном порядке.

Представьте, что у нас есть компонент (например, <Comments/>), загрузка которого требует много времени. Этот компонент можно обернуть <Suspense>. Сервер увлажняет этот компонент на сервере, а затем он отправляется клиенту. Следовательно, другие компоненты (в данном случае <NavBar />, <SideBar /> и <Post /> ) могут передаваться в потоковом режиме независимо, независимо от компонента <Comments/>. Когда сервер увлажняет <Comments/> компонент, отображается резервный вариант, в данном случае <Spinner /> ,.

Это известно как избирательное увлажнение. Остальные компоненты отображаются, и React не нужно ждать загрузки компонента <Comments/> для гидратации. С <Suspense> мы также можем гидратировать другие компоненты перед загрузкой <Comments/> компонента.

Это также позволяет объединять HTML, исключая компонент <Comments />, если это необходимо. Когда данные для комментариев будут готовы на сервере, React отправит дополнительный HTML-код в тот же поток, а также минимальный встроенный тег <script>, чтобы поместить этот HTML-код в «нужное место».

Теперь гидратация <Comments /> на сервере больше не мешает браузеру выполнять другую работу. Следовательно, другие компоненты (<NavBar / ›, <SideBar /> и <Post />) будут полностью гидратированы, и с этими компонентами можно будет взаимодействовать.

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

4. Новый переходный API

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

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

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

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

Заключение

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

  1. Новый Root API
  2. Автоматическое дозирование
  3. Suspense для SSR
  4. Новый API-интерфейс ransition

Как попробовать React 18

Вы можете установить React 18, выполнив следующие команды:

npm install react@alpha
npm install react-dom@alpha

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

Что вам больше всего нравится в этой функции?

Спасибо за чтение!

использованная литература

План React 18: https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html

Автоматическое пакетирование: https://github.com/reactwg/react-18/discussions/21

Переход: https://github.com/reactwg/react-18/discussions/41

Новая задержка для SSR: https://github.com/reactwg/react-18/discussions/37