Все, что вам нужно знать о React 18 RC
Как настроить профессиональный проект React (включая скринкаст)
17.03.2022
(Неизвестно): ошибка сценария в JavaScript
22.03.2022
Очень интересные новости для всех в сообществе React: React 18 RC (Release Candidate) был выпущен 8 марта 2022 года ! Это означает, что все функции доработаны, и у нас есть всего несколько недель до официального релиза React 18 . Для тех, кто следил за этой новой версией, вы знаете, что это было давно — React 17 был выпущен в октябре 2020 года (известный как выпуск «Без функций»). Первая альфа-версия React 18 пришла к нам в июне 2021 года, а в ноябре 2021года последовала бета -версия.
Сейчас мы находимся на последнем этапе, так что это идеальное время, чтобы наверстать упущенное во всех захватывающих новых вещах, которые появятся на вашем пути, и начать думать о том, что React 18 может предложить для вашего приложения! Можете посмотреть видеоролики React Conf , последить за обсуждениями в рабочей группе React и прочитать все блоги, но чтобы вам не пришлось это делать, прочитайте нашу статью! С учетом сказанного давайте взглянем на все основные выводы, которые вы должны знать о React 18!
React ориентирован на дизайн
Очень интересная тема помощь в преодолении разрыва между дизайнерами и разработчиками. Инженер React Эндрю Кларк во время основного доклада React 18 на React Conf 2021 рассказал обо всех способах, которыми React — и особенно новые функции React 18 — основаны на принципах проектирования.
Скриншот из слайдов React 18 Keynote .
При создании React 18 команда консультировалась не только с разработчиками, но также с дизайнерами и специалистами по UX — и надеемся, что вы можете увидеть это в новом наборе функций, который нам представили в рамках этого RC. Цитируя Эндрю в ключевом докладе: «С React дизайнеры и разработчики говорят на одном языке».
С таким сильным акцентом на пользовательский интерфейс React всегда привлекал ориентированные на дизайн команды и разработчиков. Приятно видеть, что команда действительно опирается на это, признает это в своем основном докладе и активно работает с дизайнерами и другими профессионалами UI/UX для дальнейшего развития и улучшения библиотеки.
Параллельный рендеринг
Если бы нужно было подобрать одно слово для описания всего релиза React 18, это определенно был бы concurrency . Параллелизм — это закулисная возможность, которая обеспечивает работу многих функций, появившихся в этом обновлении, таких как приостановка и новые startTransition()API useDeferredValue().
На высоком уровне параллелизм в основном означает, что задачи могут перекрываться. Вместо того, чтобы полностью завершить одно обновление состояния, прежде чем система сможет перейти к следующему, параллелизм позволяет нам переключаться между несколькими состояниями. Следует отметить, что это не означает, что все эти вещи происходят одновременно — скорее, одна задача теперь может быть приостановлена , в то время как другие, более срочные задачи будут выполняться. Затем, когда более срочные задачи выполнены, мы можем вернуться к менее срочным задачам, взяв с собой обновленную информацию о более срочных задачах.
Что React 18 предлагает нам (это так круто), так это инструменты для работы и управления этим потоком параллелизма. Разработчики теперь имеют больше контроля над расстановкой приоритетов и порядком рендеринга, чем когда-либо раньше.
Suspense
Одна из замечательных особенностей React заключается в том, насколько удобочитаемым является код. Разработчику довольно легко открыть файл и прочитать код сверху вниз, чтобы быстро понять, что происходит в этом компоненте.
Однако, когда нам нужно получить и обработать данные, часть этой простоты ускользает. Разработчики часто обращаются к библиотекам выборки данных, таким как Apollo или React Query, которые предоставляют API и хуки, позволяющие избежать сложностей.
Однако даже с этими решениями нужно было решить другие проблемы — в основном, способ, которым данные и состояние загрузки были неразрывно связаны. Раньше нам приходилось указывать какое-то состояние загрузки, а затем писать соответствующий JSX для условного рендеринга на основе этого. Это означает, что наши элементы пользовательского интерфейса всегда были привязаны к состоянию загрузки определенных фрагментов данных.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const [loading, setLoading] = useState(true); if myData != null { setLoading(true); } <> { !loading && <MyComponent /> } { loading && <Loading /> } <> |
Приостановка решает эту проблему , позволяя нам назначать запасные варианты для элементов пользовательского интерфейса, которые не готовы к отображению.
|
1 2 3 4 5 6 |
<Suspense fallback={<Loading/>}> <MyComponent myData={myData}/> </Suspense> |
Что интересно в этом, так это то, как он был вдохновлен принципами дизайна — в частности, концепцией макета скелета, где элементы пользовательского интерфейса всегда на месте и заполняются, когда контент готов. Этот подход помогает разработчику, позволяя ему писать код, который более точно соответствует фактическому дизайну, устраняя разрыв между прототипом и работающим приложением.
Этот подход упрощает переработку пользовательского интерфейса наших страниц — что загружается вместе, а что по отдельности, когда и где — потому что мы можем просто добавлять новые <Suspense>компоненты (даже вложенные в другие <Suspense>компоненты!) или перемещать другие элементы в существующие <Suspense>компоненты или из них для быстрого изменения макета страницы. Поскольку <Suspense>сами компоненты по своей сути не привязаны к конкретному фрагменту данных (как мы привыкли это делать), это отделяет код пользовательского интерфейса от функционального кода таким образом, что действительно отдает приоритет дизайну.
Однако мы не ограничиваемся использованием Suspense только для данных — мы также можем использовать его для потокового рендеринга сервера.
Рендеринг потокового сервера
Рендеринг сервера — это метод, при котором вы визуализируете вывод HTML вашего компонента React, а затем отправляете его клиенту до того, как JS будет готов, чтобы пользователь не застрял, глядя на совершенно пустую страницу. До React 18 это происходило по принципу «все или ничего» — когда все компоненты были готовы, страница обновлялась, и пользователь мог начать взаимодействовать с приложением. Это означало, что если бы у вас был только один очень медленный компонент, такой как сложная сетка данных, этот компонент мог бы стать узким местом.
Изображение со слайдов React 18 для разработчиков приложений .
Но теперь у нас есть Suspense! И так же, как мы говорили ранее, мы могли бы обернуть один медленный компонент в эти <Suspense>теги и сказать React отложить загрузку этого компонента и вместо этого сосредоточиться на отправке других, меньших, в первую очередь. Вы также можете, как упоминалось ранее, установить запасной вариант, чтобы показать анимацию загрузки.
Изображение со слайдов React 18 для разработчиков приложений .
Это позволяет пользователю видеть содержимое на странице , как только оно становится доступным, покомпонентно , вместо того, чтобы ждать, пока все будет готово, а затем получать все сразу. Вы можете сразу показать начальный HTML-код, а затем транслировать остальные!
Автоматическое дозирование
Еще одно замечательное новое обновление, которое появится в React 18, — это автоматическая пакетная обработка. Давайте начнем с обсуждения того, что такое пакетная обработка, прежде чем мы перейдем к изменениям, которые привносит в нее React 18.
Раньше пакетная обработка происходила, когда у вас было несколько обновлений состояния в одном обработчике событий ; в этой ситуации React будет выполнять повторный рендеринг только один раз в конце функции, а не каждый раз при изменении состояния. Однако этого не произошло бы вне обработчиков событий — например, если бы в вызове выборки было несколько обновлений состояния, тогда код повторно отображался бы для каждого из них.
|
1 2 3 4 5 6 7 8 9 10 11 |
fetch('http://example.com/data.json').then(() => { setIsLoading(false); setData(data); setError(null); }); // Previously this code would cause 3 different re-renders, once for each state update. // Now, these three updates will be batched together into 1 re-render. |
Теперь обновления собираются автоматически, независимо от того, во что они упакованы. Это делает ваш код намного более эффективным и предотвращает ненужный повторный рендеринг. Однако при необходимости вы можете отказаться от конкретных случаев использования, когда вы хотите , чтобы повторный рендеринг происходил.
Новые API
startTransition()
Когда мы используем startTransition API, мы помечаем некоторые наши менее срочные действия как «переходы», а затем сообщаем React, чтобы другие, более срочные действия имели приоритет на временной шкале рендеринга.
Это такое потрясающее обновление с точки зрения UX. Это сделает вещи более быстрыми и более отзывчивыми для пользователя, а также уменьшит работу, которую мы, как разработчики, проделывали, чтобы свести к минимуму эту болевые точки. Обернув эти более медленные и менее срочные обновления в startTransition, мы можем фактически сказать React, что можно просто добраться до них, когда он не занят чем-то более важным.
Это означает, что переходы могут быть прерваны более важными обновлениями, и React просто выбросит незавершенную, устаревшую работу по рендерингу и сразу перейдет к новым материалам. Это также означает, что мы никогда не окажемся в ситуации, когда мы теряем время из-за компонента, отображающего устаревшие и неточные данные. Или, что еще хуже, когда пользователю показывают информацию, которая больше не соответствует действительности.
|
1 2 3 4 5 6 7 8 9 |
onChange = (e) => { const value = e.target.value; startTransition(() => { nonUrgentAction(value); }); }; |
useTransition()
Поскольку вся ваша страница больше не будет заблокирована в ожидании этих длительных процессов, ваш пользователь может даже не осознавать, что что-то все еще загружается!
По этой причине также рекомендуется использовать isPending значение, которое также будет поставляться с React 18 как часть useTransition хука. Этот хук возвращает startTransition функцию, а также isPending значение, которое будет установлено во true время рендеринга вашего перехода. Таким образом, вы можете быстро проверить isPending , нужно ли вам настроить пользовательский интерфейс, чтобы отразить тот факт, что обновление еще не совсем готово, например, отключить кнопку.
|
1 2 3 4 5 6 |
const [isPending, startTransition] = useTransition(); <Button className={isPending ? 'disabled' : 'active'} /> |
useDeferredValue()
Новый useDeferredValue()API позволяет нам выбирать определенные части нашего пользовательского интерфейса и намеренно откладывать их обновление , чтобы они не замедляли работу других частей нашей страницы. В этом есть две приятные вещи: (1) контроль над порядком рендеринга и (2) возможность показывать предыдущие или старые значения, а не просто анимацию загрузки или серое поле.
Как упоминалось выше, это такое приятное обновление, ориентированное на дизайн. Нет ничего хуже, чем страница, полная анимаций загрузки, и во многих случаях немного старые данные лучше, чем вообще никаких данных. Это позволяет нашим компонентам никогда не чувствовать , что они загружаются, даже когда они действительно находятся в фоновом режиме. Для пользователя это будет просто… обновление! Как мило.
Вот пример того, как это можно использовать: давайте предположим, что мы извлекаем valueданные из источника данных, который регулярно обновляется, но это много контента, и обычно для загрузки требуется некоторое время. Теперь с помощью useDeferredValueмы можем разрешить извлечение новых данных в фоновом режиме и создать иллюзию быстрого и плавного обновления, заставив наш компонент использовать старое содержимое valueдо 4000 мс.
|
1 2 3 4 5 6 7 8 9 10 |
const deferredValue = useDeferredValue(value, { timeoutMs: 4000 }); return ( <div> <MyComponent value={deferredValue} /> </div> ); |
Попрощайтесь сReactDOM.render
Следует отметить, что с React 18 мы видим конец ReactDOM.renderсинтаксиса , ранее использовавшегося для подключения вашего приложения к DOM. Он заменяется на ReactDOM.createRoot, что необходимо для поддержки новых функций. Вы можете выполнить обновление без изменений ReactDOM.render, и ваш код по-прежнему будет работать, но вы получите сообщение об ошибке в своей консоли и не сможете использовать какие-либо крутые новинки в этом новом выпуске.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// The old way: ReactDOM.render( <App />, document.getElementById('root') ); // The new way: const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App/>); |
Никаких критических изменений!
Если вы прислушивались к прошлым обновлениям React, вы, возможно, ранее слышали слова «параллельный режим». Важно знать, что теперь это устарело — параллельный режим больше не является стратегией внедрения, используемой React 18. Вместо этого вы услышите о «параллельных функциях». Или, как любит говорить команда React: «Нет параллельного режима, есть только параллельные функции!»
На практике это означает, что нет высокоуровневого флага или переключателя, который должен быть «включен», чтобы использовать параллельный рендеринг — вы можете просто добавлять параллельные функции везде, где они вам нужны, в зависимости от ситуации. -case, не беспокоясь о влиянии на остальную часть вашего приложения. Поскольку все новые параллельные функции являются опциональными — это означает, что вам нужно приложить все усилия, чтобы объявить действие переходом, обернув его setTransition, например, в , вместо того, чтобы что-то устанавливалось автоматически — ваш существующий код не будет затронут Эти изменения. React 18 по-прежнему будет обрабатывать все обновления как срочные по умолчанию, если вы не используете какую-либо из параллельных функций, чтобы сообщить об обратном.Это означает, что вы можете обновить и выборочно начать внедрять новые функции в свою кодовую базу, когда будете готовы и там, где это имеет смысл!
Будьте готовы к обновлению
Итак, что вас останавливает? Обновление до React 18 RC выполняется быстро и легко, поэтому вы можете начать использовать все эти замечательные новые функции в своем приложении. Получите фору сейчас, и вы будете готовы к выпуску финальной версии React 18 всего за несколько недель!
Каждый разработчик должен следить за новинками, которые выпускает рынок, чтобы не отставать от последних тенденций.
Источник статьи: http://dev.to/
