Что нового в React v17 и путь к v18
Несколько недель назад команда React выпустила последнюю версию библиотеки React v17.0 RC. В этом посте мы рассмотрим новые изменения и обновления, с которыми поставляется этот новый выпуск.
React - это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов, и это, несомненно, одна из самых популярных библиотек JavaScript. Он имеет более 156000 звезд на GitHub и является одним из самых ярких веб-сообществ, создающих отличные приложения.
UX для обновления версий и путь к v18
Эта новая версия уникальна тем, что не содержит видимых новых функций. Вместо этого он полностью сосредоточен на обновлении React в целом.
С момента появления React всегда существовал процесс установки новой версии, в котором вы должны выбрать, обновлять ли свою версию для использования новых функций или продолжать использовать старые версии без каких-либо промежуточных действий. Например, Context API устарел, и хотя большинство приложений React не используют его, React по-прежнему поддерживает его.
Продолжаются дискуссии о продолжении поддержки или отказе от приложений, использующих старые версии. Таким образом, в дальнейшем эта стратегия обновления была переосмыслена так, чтобы включать более старые версии, и, как таковая, новая версия 17 позволяет постепенное обновление React.
Команда React в основном пыталась сделать так, чтобы в дальнейшем переход с одной версии React на другую был простым и плавным. В версии 17 вы получаете ступеньку, которая гарантирует, что, например, даже безопаснее встроить дерево, которым вы управляете в одной версии, в другое дерево, управляемое совершенно другой версией.
Речь идет просто о предоставлении большего количества вариантов обновления, потому что раньше, если вы обновлялись с одной версии React до более новой, это обновляло все приложение. В некоторых случаях, когда у вас может быть две версии React в одном проекте, это вызывает множество проблем с событиями.
Например, когда выйдет React 18, обновление с такой версии, как 17, предоставит вам варианты как полного, так и постепенного обновления приложения. Если вы выберете постепенный переход, ваше приложение будет обновляться по частям - например, при обновлении большей части приложения до React 18 и сохранении компонента диалога в версии 17.
Это может быть не идеальный путь, но он пригодится разработчикам, которые поддерживают большие проекты, и эта новая версия гарантирует, что эти приложения больше не останутся без внимания.
Изменения в делегировании событий
React обрабатывает обработчики событий таким образом, что если вы поместите один встроенный на кнопку, как это:
<button onClick={handleClick}>Эквивалент vanilla JS при компиляции будет выглядеть так:
myButton.addEventListener('click', handleClick);Затем React прикрепляет один обработчик для каждого типа события непосредственно к узлу документа, а не прикрепляет его к узлам DOM, на которых они были объявлены. Это называется делегированием событий, и это очень полезно для больших приложений и процессов, таких как воспроизведение событий.
Учитывая постепенные обновления, о которых мы только что говорили в предыдущем разделе, вложенные приложения, созданные с использованием разных версий React, также пришлось переосмыслить. В этой новой версии React обработчики событий больше не будут прикрепляться на уровне документа; скорее, они будут прикреплены к контейнеру DOM, в котором было отрисовано дерево.
const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);С этим изменением теперь можно безопасно вкладывать приложения, созданные с использованием разных версий React, хотя это будет начинаться с версии 17 и выше.
Критические изменения
В эту новую версию внесено несколько критических изменений. Команда позаботилась о том, чтобы они были минимальными; некоторые из них просто поведенческие, но их все же важно отметить. Так что такие вещи, как устаревшие методы в предыдущих выпусках, по-прежнему доступны.
Делегирование мероприятия
У вас могут возникнуть проблемы с новыми изменениями в делегировании событий.
Например, если вы добавляете ручные обработчики cdocument.addEventListener(), вы обычно ожидаете, что он перехватит все события React. В предыдущих версиях React, даже если вы вызывали функцию остановки распространения в обработчике событий, ваши настраиваемые обработчики документов все равно получат их, потому что собственное событие уже находится на уровне документа.
В этой новой версии e.stopPropagation() фактически остановит выпуск вашего обработчика документов:
document.addEventListener('click', function() {
// Этот пользовательский обработчик больше не будет получать клики
// из компонентов React, которые вызывали e.stopPropagation()
});Чтобы исправить это, преобразуйте свой обработчик событий, чтобы использовать фразу capture, передав параметр { capture: true } в качестве третьего аргумента, например:
document.addEventListener('click', function() {
// Теперь этот обработчик событий использует фазу захвата,
// поэтому он получает *все* события щелчка ниже!
}, { capture: true });Таким образом, мы видим, что делегирование событий теперь ближе к обычной модели DOM, чем когда-либо прежде.
Выравнивание браузера
В систему событий React было внесено несколько изменений, некоторые из которых включают:
- Предотвращение распространенной ошибки, такой как запуск при прокрутке дочерних элементов, событие
onScrollбольше не пузырится - React события
onBlurиonFocusтеперь переключились на внутреннее использование нативного кода событийfocusinиfocusout, что лучше соответствует существующему поведению React и даже предоставляет больше информации. - События захвата фраз, как
onClickCaptureсейчас, используют фактические обработчики фраз в браузере
Эти несколько изменений позволяют более точно согласовать React с поведением браузеров и даже улучшить взаимодействие.
Нет пула событий
Начиная с этой новой версии, оптимизация пула событий была удалена из React из-за продолжающейся путаницы и простого факта, который не улучшает производительность современного браузера.
function handleChange(e) {
setData(data => ({
...data,
// Это приводит к сбою в React 16 и более ранних версиях:
text: e.target.value
}));
}Команда React называет это изменением поведения и называет это нарушением, хотя они не видели, чтобы это что-то ломало в Facebook, поэтому шансы действительно низкие. Кроме того e.persist() по-прежнему доступен для объектов событий, хотя ничего не делает.
Время очистки эффекта
Эта новая версия также делает синхронизацию функции очистки хука useEffect более последовательной.
useEffect(() => {
// Это и есть сам эффект.
return () => { // Это его очистка. };});В React 16 функция очистки эффекта запускается синхронно, в отличие от большинства эффектов, которые не задерживают обновления экрана и которые по умолчанию React запускаются асинхронно. Команда React обнаружила, что этот синхронный процесс не так идеален, как и в случае с componentWillMount для больших приложений, когда пользователь переключает вкладки.
Итак, эта новая версия вносит некоторые изменения. Функция очистки эффекта теперь будет выполняться асинхронно, как и другие, и, если компонент отключается, очистка будет запущена только после того, как обновления отобразятся на экране.
Последовательные ошибки при возврате undefined
Разработчики React знают, что функции, возвращающие undefined, помечаются ошибкой:
function Button() {
return; // Ошибка: из рендеринга ничего не было возвращено
}В основном из-за того, насколько легко непреднамеренно вернуть undefined:
function Button() {
// Мы забыли написать return, поэтому этот компонент возвращает undefined.
// React представляет это как ошибку, а не игнорирует.
<button />;
}Первоначально это поведение было исключительно для компонентов класса и функции, но в этой новой версии были добавлены компоненты forwardRef и memo, что сделало их поведение совместимым с обычными компонентами класса и функции.
let Button = forwardRef(() => {
// Мы забыли написать return, поэтому этот компонент возвращает undefined.
// React 17 рассматривает это как ошибку, а не игнорирует.
<button />;
});
let Button = memo(() => {
// Мы забыли написать return, поэтому этот компонент возвращает undefined.
// React 17 рассматривает это как ошибку, а не игнорирует.
<button />;
});Обратите внимание, что для случаев, когда вы ничего не визуализируете намеренно, n``u``ll будет возвращено вместо этого.
Удаление частного экспорта
Некоторые внутренние компоненты React подвергались воздействию других несвязанных проектов, особенно React Native для Интернета, который раньше зависел от внутренних компонентов системы событий, которая была очень хрупкой и легко ломалась. Теперь эти частные экспорты удалены, в этой новой версии React, для них было предложено другое решение, которое не позволяет им зависеть от этих внутренних компонентов.
Это изменение просто означает, что более старые версии RN для веб-версий не будут совместимы с React v17, но более новые версии будут.
Как обновить
Рекомендуется использовать эту версию для тестовых проектов, так как в ближайшем будущем появятся более стабильные версии. Вы можете поднять любые проблемы, которые могут возникнуть при использовании или обновлении для использования React v17 RC, на GitHub.
Чтобы установить с помощью npm, запустите:
npm install react@17.0.0-rc.1 react-dom@17.0.0-rc.1Чтобы установить с помощью Yarn, запустите:
yarn add react@17.0.0-rc.1 react-dom@17.0.0-rc.1У команды также есть UMD-сборки React через CDN:
<script crossorigin src="https://unpkg.com/react@17.0.0-rc.1/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.0-rc.1/umd/react-dom.production.min.js"></script>Вы можете прочитать документацию для получения подробных инструкций по установке.
Вывод
На этом мы подошли к завершению нашего обзора. Хотя в React 17 не было никаких новых функций, он создает прецедент для версии 18, напрямую обращаясь к опыту обновления и более точно согласовывая поведение React с современными браузерами. Удачного взлома!
