Что нового в React v17?

Первый выпуск React за три года. Какие новости?

Прошло около трех лет с момента первого выпуска React v16, и, наконец, ожидание следующего крупного релиза подошло к концу. Команда разработчиков React обещает, что обновление v17 невероятно важно для будущего React, но также было упомянуто, что не было добавлено никаких новых функций. Вам может быть интересно, почему он был выпущен тогда.

В этой статье я перечислю изменения, внесенные в последнюю версию.

Почему нет новых функций?

React 17 в первую очередь ориентирован на то, чтобы упростить обновление самого React. Хотя необычно, что в этом обновлении нет функций, предназначенных для разработчиков, основная цель этого выпуска - убедиться, что можно безопасно встроить дерево, управляемое одной версией React, в дерево, управляемое другой версией React. Команда разработчиков React называет этот релиз ступенькой.

Постепенное обновление

Все эти годы обновления React были пустыми. Либо вам нужно было продолжать использовать старую версию, либо вам нужно было обновить все приложение до новой версии. Поэтому, если в новых обновлениях были внесены критические изменения, и вы планировали перейти на более новую версию, вам пришлось бы изменить свою базу кода, особенно когда ваша база кода была огромной.

Команда React устранила большинство этих проблем с помощью React 17. Когда выйдет React v18 и следующие версии, вы сможете постепенно мигрировать, обновляя несколько частей вашего приложения, сохраняя при этом работу других частей на React v17. Поэтому, если у вас есть большое приложение, использующее версии, которые не поддерживались активно, этот вариант будет очень полезен.

Команда React подготовила репо, чтобы продемонстрировать, как лениво загружать старую версию React:

Изменения в делегировании событий

В React 17 React больше не будет подключать обработчики событий на уровне document. Вместо этого он прикрепит их к корневому контейнеру DOM, в котором отображается ваше дерево React . - Блог React

Давайте посмотрим на пример. Подумайте о том, чтобы прикрепить событие onClick к кнопке в React, например:

<button onClick={handleClick}>

Эквивалент ванильного JS приведенному выше коду при компиляции будет выглядеть так:

myButton.addEventListener('click', handleClick);

Затем React присоединяет один обработчик для каждого типа события к узлу документа напрямую, а не прикрепляет его к узлам DOM, на которых они были объявлены. Это называется делегированием событий.

В React v17 обработчики событий больше не будут прикрепляться на уровне документа, но они будут прикреплены к контейнеру DOM, в котором было отрисовано дерево.

const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);

С этим изменением в React v17 теперь можно безопасно вкладывать приложения, созданные с помощью разных версий React.

Новое преобразование JSX

React v17 предлагает новую, переписанную версию JSX Transform, хотя обновление до этого нового преобразования не является обязательным. Он по-прежнему предлагает несколько преимуществ, таких как:

• Вам не нужно импортировать React.
• Увеличивает размер вашего пакета.

Если вы хотите узнать больше об этом новом преобразовании, взгляните на это сообщение в блоге команды React:

Критические изменения

В эту новую версию внесено несколько критических изменений.

1. Делегирование мероприятия

Как упоминалось выше, после обновления вы можете столкнуться с некоторыми проблемами.

В этой новой версии event.stopPropagation() фактически остановит выпуск вашего обработчика документов:

document.addEventListener('click', function() {
  // This custom handler will no longer receive clicks
  // from React components that called e.stopPropagation()
});

Чтобы исправить это, преобразуйте прослушиватель событий для использования фазы capture, передав параметр { capture: true } в качестве третьего аргумента, например:

document.addEventListener('click', function() {
  // Now this event handler uses the capture phase,
  // so it receives *all* click events below!
}, { capture: true });

Таким образом, мы видим, что делегирование событий теперь ближе к обычной модели DOM, чем когда-либо прежде.

2. Согласование с браузерами

React внес несколько изменений в систему событий:

• onScroll событие больше не пузырится.
• События onBlur и onFocus теперь переключены на использование внутренних событий focusin и focusout, что лучше соответствует существующему поведению React и даже предоставляет больше информации.
• onClickCapture теперь использует фактические прослушиватели фазы захвата браузера.

3. Нет объединения событий

В этой новой версии оптимизация пула событий была удалена из React из-за продолжающейся путаницы и потому, что она не улучшает производительность.

В React 17 этот код работает так, как и следовало ожидать. Старая оптимизация пула событий была полностью удалена, поэтому вы можете читать поля событий, когда они вам понадобятся.

4. Время очистки эффекта

Эта новая версия также делает синхронизацию useEffect функции очистки привязки более согласованной.

useEffect(() => {
  // This is the effect itself.
  return () => {    // This is its cleanup.  };});

В React v16 функция очистки эффекта запускается синхронно. Согласно React blog, В React v17 функция очистки эффекта всегда выполняется асинхронно - например, если компонент размонтируется, очистка запускается после обновления экрана.

5. Постоянные ошибки при возврате undefined.

В React v16 функции, возвращающие undefined, всегда выдают ошибку в основном из-за того, насколько легко вернуть undefined непреднамеренно:

function Button() {
  // We forgot to write return, so this component returns undefined.
  // React surfaces this as an error instead of ignoring it.
  <button />;
}

Первоначально это поведение было только исключительным для компонентов класса и функции, но в этой новой версии были добавлены компоненты forwardRef и memo, что делает их поведение совместимым с обычными компонентами классов и функций. Обратите внимание, что для случаев, когда вы ничего не визуализируете намеренно, вместо этого будет возвращено null.

Заключение

Хотя React v17 не содержит каких-либо новых функций, он создает прочную основу для следующих версий, напрямую обращаясь к процессу обновления и более точно согласовывая поведение React с современными браузерами. Надеюсь, эта статья была полезной.

Спасибо за чтение!

Ссылка