Возможно, это самое большое улучшение пользовательского опыта.
React 18 содержит некоторые новые готовые улучшения и больше ориентирован на взаимодействие с пользователем и изменения внутренней архитектуры. Новые функции заключаются в следующем.
1. Новый Root API
Нам известно, как компонент <App />
обычно отображается в файле index.js
на корневом элементе в файле index.htm
l.
В 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, чтобы подготовить экосистему к плавному и постепенному внедрению новой версии. В заключение мы имеем:
- Новый Root API
- Автоматическое дозирование
- Suspense для SSR
- Новый 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