Все новое в React 18
React 17 был утомительным для разработчиков. На самом деле добавлено не так много, но это определенно не относится к response 18. В этой статье я расскажу вам о некоторых из главных обновлений и покажу, как начать использовать React 18 alpha сегодня. Ссылки на все упомянутое будут ниже.
В React 18 появился новый Root API. Вот что вы привыкли видеть. Мы передаем ReactDom.render наш компонент приложения, а затем document.getElementById и наш корневой элемент. Итак, мы визуализируем компонент нашего приложения в корневом элементе страницы. Довольно просто!
Вот новый способ. У нас есть корневая переменная, равная новому методу под названием create root. Он передается нашему корневому элементу, а затем мы вызываем root.render и передаем компонент нашего приложения.
Он выполняет то же самое, но по-другому. Старый способ теперь называется Legacy Root API, и он по-прежнему будет работать в React 18, но в какой-то момент будет прекращен благодаря использованию нового Root API. Вы получите доступ ко всем улучшениям React 18, включая параллельные функции, о которых мы поговорим в этой статье.
Приостановка
Ожидание наконец-то закончилось, в этом обновлении мы собираемся получить полную поддержку для этого. Итак, что такое неизвестность? Как следует из названия, он приостанавливает выполнение чего-либо, пока оно не будет готово к рендерингу.
В этом примере у нас есть компонент, которому требуется время для выборки данных, прежде чем они будут готовы к визуализации.
Ожидание будет использовать откат до тех пор, пока не будут возвращены данные и не будут обработаны компоненты. Здесь важно отметить, что случайный компонент здесь не ожидает данных, но он все равно будет приостановлен до тех пор, пока все, что находится внутри неизвестности, не будет готово для рендеринга.
И теперь ожидание будет чрезвычайно полезно с SSR или рендерингом на стороне сервера. В настоящее время с SSR вы собираетесь получить полностью обработанный HTML, но вашему браузеру все равно необходимо загрузить JavaScript и обработать всю страницу, прежде чем она станет интерактивной. Suspense может значительно ускорить загрузку.
Используя пример репозитория рабочей группы React 18, у нас есть страница, загружающая панель навигации, боковую панель, сообщение и комментарий.
Теперь нам действительно не нужно загружать комментарии, прежде чем сайт станет интерактивным. Так что мы собираемся приостановить комментарии. Чтобы зритель мог начать читать статью, а затем мы загрузим комментарии в фоновом режиме.
Еще одна крутая вещь в неизвестности - это избирательное увлажнение.
В этом примере мы приостанавливаем боковую панель и комментарии. Гидратация начнется с первого подвешенного компонента в дереве. Таким образом, сначала будет гидратироваться боковая панель, но если пользователь попытается взаимодействовать с разделом комментариев, React будет отдавать приоритет гидратации комментариев, а не боковой панели.
Автоматическое пакетирование
В React 17 и более ранних версиях реагируйте пакетной повторной визуализацией обновлений во время события браузера, такого как щелчок. Вот пример из документации.
Таким образом, в этом дескрипторе реакция щелчка будет объединять эти два обновления состояния в один повторный рендеринг.
Но если вам нужно получить данные, а затем обновить состояние, эти повторные отрисовки не будут выполняться в пакетном режиме.
В response 18, если вы используете новый Create Root API, все обновления состояния будут автоматически группироваться независимо от того, когда они произойдут. Если у вас есть критически важный компонент, который вы не хотите объединять. Вы можете отказаться от этого, используя ReactDom.flushSync.
Параллельные функции
Некоторые другие параллельные функции интересны, но я еще не изучил их полностью. Один из них - startTransition. Это сообщит React, какие обновления являются срочными, а какие могут подождать, и это поможет пользовательскому интерфейсу оставаться отзывчивым.
Затем есть useDeferredValue.. Это позволяет отложить менее важные обновления.
А затем ‹SuspenseList›. Это координирует порядок загрузки индикаторов.
Очевидно, что пока не использую React 18 в производстве. Это всего лишь альфа-версия, но начните узнавать об этих новых функциях прямо сейчас. React 18 перейдет в публичную бета-версию через несколько месяцев, а затем через несколько недель, так что будьте готовы. Это действительно интересно.
Упомянутые ресурсы React 18:
План для React 18 - https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html
React 18 Рабочая группа - https://github.com/reactwg/react-18
Обсуждения React 18 - https://github.com/reactwg/react-18/discussions
