React v17.0 официально выпущен!

React.js
React v17.0 официально выпущен!

Подписывайтесь на нас

поиск в WeChat"отпечаток китайский«Официальный аккаунт предоставит вам самую свежую информацию о внешнем интерфейсе.

Извините, я снова здесь. После двух сообщений в блоге React 17 RC вышла официальная версия React 17. Официальная версия не сильно изменилась по сравнению с предыдущей версией, но это означает, что ее можно официально запустить в производство.

Сегодня мы объявляем об официальном выпуске React 17! До этого мы былиСообщение в блоге о React 17 RCПоследствия выпуска React 17 и внесенные изменения описаны в . Эта статья представляет собой краткое изложение этой статьи, если вы уже читали этот пост в блоге, вы можете пропустить этот.

нет новых функций

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

Стоит отметить, что React v17 служит «краеугольным камнем» последующих версий, что упрощает вложение разных версий React друг в друга.

Кроме того, React упростит встраивание приложений из других технологий.

инкрементное обновление

**React v17 открывает новую главу в инкрементальных обновлениях React. ** При обновлении с React 15 до 16 (или с 16 до 17) вы обычно обновляете все приложение за один раз, что хорошо работает для большинства приложений. Однако, если кодовая база была написана несколько лет назад и не поддерживается и не обновляется своевременно, это сделает обновление более дорогим. Кроме того, до React 17 использование разных версий React на одной странице (что можно сделать, но рискованно) будет вызывать проблемы с событиями с некоторым неизвестным риском.

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

но это нене означаетВы должны делать пошаговые обновления.Одноразовое обновление по-прежнему является лучшим вариантом для большинства приложений.. Загрузка двух версий React по-прежнему не идеальна — даже если одна из версий загружается по запросу. Но это имеет большой смысл для тех больших приложений, которые не поддерживались в течение длительного времени, и React v17 начинает делать эти приложения не так легко устаревшими.

мы готовыпример репозитория, этот пример демонстрирует, как лениво загружать старые версии React, когда это необходимо. Этот пример создан с помощью приложения Create React, такого же эффекта можно добиться с помощью других инструментов. Друзья, которые используют другие инструменты, могут предоставить Демо в виде PR.

Уведомление

мыдобавить другие функцииОтложен до выпуска React v17. Цель этого выпуска — включить добавочные обновления. Если обновление до 17 затруднено, это противоречит цели этого выпуска.

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

Чтобы реализовать инкрементные обновления, нам нужно внести изменения в систему событий React. React 17 — важный выпуск из-за потенциально критических изменений в этом выпуске. Дополнительные сведения о версиях см.Версия FAQ, чтобы узнать о нашей приверженности стабильности версий.

В React v17 React больше не будет добавлять обработку событий вdocumentвместо этого добавьте обработку событий в корневой DOM-контейнер, который отображает дерево React:

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

В React 16 и более ранних версиях React обрабатывал большинство событий.document.addEventListener()работать. React v17 начнется с вызоваrootNode.addEventListener()вместо.

此图展示了 React 17 如何将事件连接到根节点而非 document

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

Если вы столкнулись с этой проблемой при обновлении,Взгляните на это распространенное решение.

Другие критические изменения

Сообщение в блоге RC для React v17Описывает другие критические изменения в React v17.

В процессе обновления компонентов 10w+ в коде проекта Facebook мы изменили менее 20 компонентов, поэтому **мы предполагаем, что у большинства приложений не возникнет особых проблем при обновлении до v17. ** Если у вас возникнут проблемы, пожалуйста,скажи нам.

Совершенно новая трансформация JSX

Реагировать v17 поддерживаетСовершенно новая трансформация JSX. Мы также сделали его совместимым с версиями React 16.14.0, React 15.7.0 и 0.14.0. Обратите внимание, что эта функция совершенно необязательна и необязательна. Предыдущее преобразование JSX будет продолжать поддерживаться, и мы не планируем прекращать его поддержку.

React Native

У React Native будет отдельный график выпуска. В настоящее время мы ожидаем, что поддержка React v17 появится в React Native 0.65, но точная версия может отличаться. Вы можете публиковать сообщения в сообществе React Native.issue trackerучаствовать в обсуждении.

Установить

Установите React v17 с помощью npm:

npm install react@17.0.0 react-dom@17.0.0

Установите React v17 с пряжей:

yarn add react@17.0.0 react-dom@17.0.0

Мы также предоставляем версию CDN, созданную UMD:

<script crossorigin src="https://unpkg.com/react@17.0.0/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.production.min.js"></script>

Смотрите в документацииПодробная инструкция по установке.

Список изменений

React

  • для новогоКонвертер JSXДобавить кreact/jsx-runtimeиreact/jsx-dev-runtime. (@lunaruanПредставлено#18299)
  • Создавайте стеки вызовов компонентов на основе собственных фреймворков. (@sebmarkbageПредставлено#18561)
  • Может быть установлен в контекстеdisplayNameдля улучшения информации о стеке вызовов. (@eps1lonПредставлено#18224)
  • не допустить'use strict'Утечка из бандлов UMD. (@koba04Представлено#19614)
  • прекратить использоватьfb.meперенаправить. (@cylimПредставлено#19598)

React DOM

  • Делегировать мероприятие отdocumentПереключитесь на корень. (@trueadmПредставлено#18195иразное)
  • Перед запуском следующего побочного эффекта очистите все побочные эффекты. (@bvaughnПредставлено#17947)
  • работать асинхронноuseEffectФункция очистки. (@bvaughnПредставлено#17925)
  • используя браузерfocusinиfocusoutзаменятьonFocusиonBlurбазовая реализация. (@trueadmПредставлено#19186)
  • положить всеCaptureВсе события реализуются с использованием фазы захвата браузера. (@trueadmПредставлено#19221)
  • запрещено вonScrollПузырь, когда событие. (@gaearonПредставлено#19464)
  • еслиforwardRefилиmemoВозвращаемое значение компонентаundefined, выдается исключение. (@gaearonПредставлено#19550)
  • Удалите пул событий. (@trueadmПредставлено#18969)
  • Удалите внутренние компоненты, которые не нужны React Native Web. (@necolasПредставлено#18483)
  • При монтировании root подключите все известные прослушиватели событий. (@gaearonПредставлено#19659)
  • В режиме разработки отключите второй проход рендеринга.console. (@sebmarkbageПредставлено#18547)
  • Устарело, поскольку задокументировано и вводит в заблуждениеReactTestUtils.SimulateNativeAPI. (@gaearonПредставлено#13407)
  • Переименовать закрытые поля, используемые внутри (@gaearonПредставлено#18377)
  • Не вызывайте User Timing API в среде разработки. (@gaearonПредставлено#18417)
  • Отключить консоль при повторном рендеринге в строгом режиме. (@sebmarkbageПредставлено#18547)
  • В строгом режиме компоненты повторного рендеринга также не используют хуки. (@eps1lonПредставлено#18430)
  • Разрешить вызов функций жизненного циклаReactDOM.flushSync(но с предупреждением). (@sebmarkbageПредставлено#18759)
  • будетcodeсвойство добавляется к объекту события клавиатуры. (@bl00mberПредставлено#18287)
  • заvideoдобавление элементаdisableRemotePlaybackАтрибуты. (@tombrowndevПредставлено#18619)
  • заinputдобавление элементаenterKeyHintАтрибуты. (@eps1lonПредставлено#18634)
  • когда не дано<Context.Provider>При указании любого значения выдается предупреждение. (@charlie1404Представлено#19054)
  • еслиforwardRefилиmemoВозвращаемое значение компонентаundefined, выдается предупреждение. (@bvaughnПредставлено#19550)
  • Улучшить сообщения об ошибках для недопустимых обновлений. (@JoviDeCroockПредставлено#18316)
  • Игнорировать forwardRef и memo из информации о стеке вызовов. (@sebmarkbageПредставлено#18559)
  • Улучшены сообщения об ошибках при переключении между контролируемыми и неконтролируемыми входами. (@vcarlПредставлено#17070)
  • ХранитьonTouchStart,onTouchMoveиonWheelПо умолчанию пассивный. (@gaearonПредставлено#19654)
  • Исправлено закрытие iframe в режиме разработки,setStateожидающая проблема. (@gaearonПредставлено#19220)
  • использоватьdefaultPropsИсправлена ​​проблема с компонентом pull-shelf при рендеринге. (@jddxfПредставлено#18539)
  • ремонт когдаdangerouslySetInnerHTMLзаundefinedКогда проблема ложного срабатывания предупреждения. (@eps1lonПредставлено#18676)
  • стандартная плата за использованиеrequireРеализовано для исправления Test Utils. (@just-borisПредставлено#18632)
  • ремонтonBeforeInputсообщить неправильноevent.type. (@eps1lonПредставлено#19561)
  • исправить в фаерфоксеevent.relatedTargetВыходundefinedПроблема. (@claytercekПредставлено#19607)
  • Исправление «неопределенной ошибки» в IE11. (@hemakshisПредставлено#19664)
  • Исправлены проблемы с рендерингом в теневом корне. (@Jack-WorksПредставлено#15894)
  • Исправить с захватом событийmovementX/YПроблемы с полифиллами. (@gaearonПредставлено#19672)
  • Использовать обработку делегированияonSubmitиonResetсобытие. (@gaearonПредставлено#19333)
  • Улучшить использование памяти. (@trueadmПредставлено#18970)

React DOM Server

  • использование рендеринга на стороне сервераuseCallbackиuseMemoПоследовательный. (@alexmckenleyПредставлено#18783)
  • Устранена проблема утечки состояния, когда функциональные компоненты вызывают исключения. (@pmaccartПредставлено#19212)

React Test Renderer

  • улучшатьfindByTypeсообщение об ошибке. (@henryqdineenПредставлено#17439)

Параллельный режим (экспериментальная стадия)

  • Улучшить эвристический алгоритм обновления. (@acdliteПредставлено#18796)
  • Добавить перед внедрением APIunstable_префикс. (@acdliteПредставлено#18825)
  • Удалитьunstable_discreteUpdatesиunstable_flushDiscreteUpdates. (@trueadmПредставлено#18825)
  • удаленныйtimeoutMsпараметр. (@acdliteПредставлено#19703)
  • инвалид<div hidden />Предварительно обработан для поддержки будущих API. (@acdliteПредставлено#18917)
  • Добавлено для саспенсаunstable_expectedLoadTime, для деревьев, привязанных к процессору. (@acdliteПредставлено#19936)
  • Добавлена ​​реализацияunstable_useOpaqueIdentifierКрюк. (@lunaruanПредставлено#17322)
  • Добавлен экспериментальныйunstable_startTransition API. (@rickhanloniiПредставлено#19696)
  • Использование в тестовом рендеререactПосле этого запасной вариант Suspense больше не обновляется. (@acdliteПредставлено#18596)
  • Используйте глобальный тайм-аут рендеринга для приостановки ЦП. (@sebmarkbageПредставлено#19643)
  • Перед монтированием очистите содержимое существующего корневого каталога. (@bvaughnПредставлено#18730)
  • Исправлена ​​ошибка с неправильными границами. (@acdliteПредставлено#18265)
  • Исправлена ​​ошибка, приводившая к потере ожидающих обновлений дерева. (@acdliteПредставлено#18384а также#18457)
  • Исправлена ​​ошибка, из-за которой обновления фазы рендеринга терялись. (@acdliteПредставлено#18537)
  • Исправьте ошибку SuspenseList. (@sebmarkbageПредставлено#18412)
  • Исправлена ​​ошибка, из-за которой резервный режим ожидания отображался преждевременно. (@acdliteПредставлено#18411)
  • Исправлена ​​ошибка использования исключения компонента класса в SuspenseList. (@sebmarkbageПредставлено#18448)
  • Исправлена ​​ошибка, из-за которой входной контент мог быть удален обновлениями. (@jddxfПредставлено#18515а также@acdliteПредставлено#18535)
  • Исправлена ​​​​ошибка зависания после приостановки отката приостановки. (@acdliteПредставлено#18663)
  • Не отрезайте хвост SuspenseList, если он гидратирован. (@sebmarkbageПредставлено#18854)
  • ремонтuseMutableSourceошибка в , эта ошибка может быть вgetSnapshotпоявляется при смене. (@bvaughnПредставлено#18297)
  • ремонтuseMutableSourceОтвратительный баг. (@bvaughnПредставлено#18912)
  • Если внешне визуализируется и вызывается перед фиксациейsetState, будет выдано предупреждение. (@sebmarkbageПредставлено#18838)
Категории