Поскольку в 2013 году исходный код был впервые открыт, React.js быстро стал самым популярным интерфейсным фреймворком в отрасли. Мне посчастливилось начать свою карьеру в веб-разработке примерно в это время. Любой, кто участвовал в этой поездке с самого начала, знает, что она значительно улучшилась и продолжает интегрировать функциональные возможности, которые ранее требовали дополнительных библиотек. Накануне новейшего релиза React.js мы можем быстро взглянуть на то, чего ожидать.
График
По состоянию на февраль 2022 года у React.js v18 еще нет конкретной даты выпуска. Все сообщения, связанные с выпуском, в настоящее время можно найти на веб-сайте React.js и в рабочей группе на Github. Однако мы знаем, что можем ожидать минимальные критические изменения в поведении компонентов по сравнению с прошлыми выпусками. Одна прямая цитата из рабочей группы даже гласила:
"Мы ожидаем, что многие пользователи смогут выполнить обновление в течение одного дня"
Версия 18 соответствует стандартному шаблону цикла выпуска программного обеспечения (начиная с альфа-версии и заканчивая общедоступной версией (GA)), в котором мы в настоящее время ожидаем первого релиз-кандидата (RC):
Новые возможности
Приостановка получения данных
Эта функция, наряду с потоковой передачей на стороне сервера / выборочной гидратацией, на мой взгляд, является самой важной особенностью этого нового выпуска React.js. Задержка уже была частью React до этого выпуска. Это компонент более высокого порядка, который позволяет вам отображать что-то, пока ваше приложение ожидает асинхронного вызова API для получения некоторых данных. Suspense for Data Fetching — это новая функция, которая позволяет использовать Suspense для декларативного «ожидания» чего-либо еще, включая ленивую загрузку другого компонента:
const ChildComponent = React.lazy(() => import('./Child'));
<Suspense fallback={<Skeleton />}>
<ChildComponent />
</Suspense>Библиотеки выборки данных могут использовать преимущества новых API для поддержки приостановки выборки данных. Ожидается, что Relay, библиотека извлечения данных Facebook GraphQL, будет единственной, которая полностью поддержит это в тот день, когда React v18 станет общедоступным. Однако экспериментальная поддержка доступна во многих библиотеках выборки данных, хотя экспериментальный синтаксис может быть изменен.
Потоковая передача на стороне сервера / выборочная гидратация
Термин «Потоковая передача на стороне сервера» может немного сбивать с толку, поскольку он не имеет ничего общего с отправкой сервером новых фрагментов разметки клиенту по мере его загрузки. Раньше React загружал всю страницу сразу. Если бы одному компоненту потребовалось больше времени для загрузки своих данных, это заблокировало бы все. С потоковой передачей на стороне сервера, если вы используете приостановку с компонентом, React будет ожидать гидратации компонента до тех пор, пока условие загрузки не будет удовлетворено, но может гидратировать остальную часть страницы.
Переход
Это еще одна важная функция React 18. С ее помощью разработчики могут легко решать проблемы с частыми обновлениями. Хук useTransition помогает разработчикам легко определить, какое действие блокирует основной поток. Например, если у вас есть элемент ‹input /›, вы можете одновременно обновить значение ввода и результаты поиска. Если появится более важное обновление, обновления, переданные в useTransition, будут помечены как несрочные. Это поможет сохранить отзывчивость вашего приложения даже во время обновлений на большом экране:
...
const [resource, setResource] = useState(0);
const [startTransition, isPending] = useTransition({
timeoutMs: 3000
});
return (
<>
<input
onChange={(e) => {
/**
* Wrapping the state update in `startTransition`
* which is a function returned by `useTransition`
*/
startTransition(() => {
const nextUserId = getNextId(e.target.value);
setResource(fetchProfileData(nextUserId));
});
}}
/**
* `isPending` is a boolean returned by the useTransition hook
* indicating whether we are waiting for the transition to
* finish or not
*/
disabled={isPending}
/>
<ProfilePage resource={resource} />
</>
);
...
Автоматическое дозирование
Это когда у вас есть несколько хуков useState, обновляющихся внутри одного обработчика событий. В React v18 будет улучшена производительность при выполнении этого стандартного действия, называемого автоматической пакетной обработкой. Это позволит исключить рендеринг компонентов «Наполовину готовый».
...
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
const handleClick = () => {
fetchSomething().then(() => {
setCount(c => c + 1);
setFlag(f => !f);
});
};
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black" }}>
Count: {count}
</h1>
<h1 style={{ color: flag ? "blue" : "black" }}>
Flag: {`${flag}`}
</h1>
</div>
);
...
Корневой API
В React 18 два разных корневых API будут развернуты из пакета react-dom. Будет старый корневой API (ReactDOM.render) и новый ReactDOM.createRoot. Устаревший API в конечном итоге станет устаревшим, он будет вызывать предупреждения.
Измените это:
К этому:
Новые крючки
- useSyncExternalStore — заменит существующий useMutableSource (пользователи Redux, скорее всего, никогда не будут использовать хук useMutableSource напрямую. Они будут использовать хук, предоставленный Redux, который использует useMutableSource внутри)
- useId — помогает избежать несоответствий гидратации (вспомните раздражающее предупреждение о добавлении ключевого атрибута к каждому компоненту в массиве). Обычно я бы использовал для этого библиотеку типа uuid, но теперь в React 18 она встроена.
- useInsertionEffect — работает примерно так же, как useLayoutEffect для библиотек CSS, которые создают новые правила на лету и вставляют их с тегами ‹style› в модель DOM. Сегодня это большинство библиотек CSS-in-JS, разработанных специально для React.
Как попробовать эти новые функции сегодня
Приведенный выше список не является целостным списком всех новых функций, но это хорошее начало. Чтобы начать использовать эти функции сегодня, вы можете взглянуть на эту демонстрацию для автоматической пакетной обработки:
Чтобы установить и опробовать пакет бета-версии с новым create-react-app, используйте следующую команду:
$ npm install [email protected] [email protected]
Повышение уровня кодирования
Спасибо, что являетесь частью нашего сообщества! Больше контента в публикации Level Up Coding.
Подписывайтесь: Twitter, LinkedIn, Информационный бюллетень
Level Up меняет рекрутинг в сфере технологий ➡️ Присоединяйтесь к нашему коллективу талантов
