Команда React выпустила альфа-версию 18. React 18 в первую очередь предназначен для повышения производительности пользовательского интерфейса за счет внедрения готовых функций и улучшений.
В этом блоге мы увидим некоторые из лучших новых функций в React 18.
- Корневой API
- Автоматическое дозирование
- Новая архитектура Suspense SSR
- Новый API startTransition
Корневой API
Первое изменение, которое вы заметите, это Root API. React 18 поставляет новый корневой API, который называется ReactDOM.createRoot.
До React 18 мы использовали метод render из пакета ReactDOM для рендеринга нашего дерева компонентов React, как показано ниже.
В версии 18 мы будем использовать новый метод createRoot для создания корня, а затем вызывать рендеринг для этого корня.
Основное отличие заключается во внутренностях того, как работает React, но, с нашей точки зрения, оно введено для того, чтобы сделать переход на React 18 более плавным.
Вы можете использовать устаревший API ReactDOM.render, но вы увидите предупреждение о том, что он устарел, а также вас попросят переключиться на новый createRoot API.
Автоматическое дозирование
Пакетная обработка группирует несколько обновлений состояния в один повторный рендеринг для повышения производительности. В React 17 не было согласованности в пакетных обновлениях. Давайте посмотрим на пример этого.
Если вы извлечете данные из этого обработчика кликов, а затем дважды обновите состояние, React не будет пакетировать обновления. Вместо этого он будет выполнять здесь два независимых обновления.
В React 18 с помощью нового createRoot API, который мы только что обсуждали, React будет автоматически пакетировать все обновления, независимо от того, где они происходят.
Это означает, что обновления внутри тайм-аутов, промисов, обработчиков событий или любых других событий будут одинаковыми.
Мы ожидаем, что это приведет к меньшему объему рендеринга и, следовательно, к повышению производительности ваших приложений.
Что делать, если я не хочу выполнять пакетную обработку в React 18? Вы можете использовать метод flushSync из пакета react-dom.
Новая архитектура Suspense SSR
React 18 будет включать архитектурные улучшения производительности рендеринга на стороне сервера (SSR) React. SSR позволяет генерировать HTML из компонентов React на сервере и отправлять этот HTML клиенту.
В приложении React SSR всегда происходит в несколько этапов:
- На сервере извлеките данные для всего приложения.
- На сервере визуализируйте все приложение в HTML и отправьте его в ответе.
- На клиенте загрузите код Javascript для всего приложения.
- Наконец, на клиенте подключите логику Javascript к сгенерированному сервером HTML для всего приложения, что называется гидратация.
В React 17 каждый шаг должен был завершиться для всего приложения сразу, прежде чем мог начаться следующий шаг. Это неэффективно, если некоторые части вашего приложения работают медленнее других.
В идеале весь HTML должен отображаться сразу, затем загружать все js сразу, а затем все гидратируется.
В React 18 мы можем использовать suspense, чтобы разбить наше приложение на более мелкие независимые блоки. Эти устройства будут выполнять вышеуказанные шаги независимо друг от друга и не будут блокировать остальную часть приложения.
<Layout>
<NavBar />
<Sidebar />
<RightPane>
<Post />
<Suspense fallback={<Spinner />}>
<Comments />
</Suspense>
</RightPane>
</Layout>
Оборачивая <Comments> в <Suspense>, мы сообщаем React, что ему не нужно ждать комментариев, чтобы начать потоковую передачу HTML для остальной части страницы. React отправит заполнитель (спиннер) вместо комментариев.
Таким образом, пользователи приложения могут увидеть контент раньше и начать взаимодействовать с ним намного быстрее.
Новый API startTransition
startTransition API позволяет улучшить взаимодействие с пользователем, помечая определенные обновления как «переходы». Посмотрим на его примере.
У нас есть поле ввода SearchQuery, которое фильтрует большой список данных, когда пользователь вводит в поле ввода. Тогда произойдут две вещи,
- Сохраните значение поля ввода в переменной состояния, чтобы отразить то, что вводит пользователь.
- Фильтрация списка в фоновом режиме на основе поискового запроса или набираемого текста.
Таким образом, простой ввод в поле ввода может вызвать задержку на странице. В то время как все делает набор текста или другие взаимодействия медленными и определенно невосприимчивыми.
startTransition API решает эту проблему, предоставляя вам возможность помечать обновления как переходы.
Обновление значения входного фильтра по мере ввода пользователем важно, поэтому мы можем пометить его здесь как срочное.
В нашем примере список фильтрации отражает переходы в пользовательском интерфейсе от одного представления к другому, поэтому его можно пометить как переход. Это тоже не так срочно.
Обновления, завернутые в startTransition API, обрабатываются как несрочные, и они будут прерваны, если появятся более срочные обновления, такие как нажатия клавиш, клики.
Теперь, если пользователь вводит несколько символов во входные данные SearchQuery, React отбрасывает устаревшую работу по рендерингу, которая не была завершена, и отображает только последнее обновление.
Итак, это основные новые функции, которые вы получите в React 18. Спасибо 😇
