【Перевод】Руководство по обновлению официального блога React v16.0

Мы очень рады объявить о выпуске React v16.0! Эти изменения включают в себя некоторые давние функции, в том числефрагменты,граница ошибки,portals,служба поддержкиПользовательские свойства DOM,продвигать[рендеринг на стороне сервера]так же какУменьшить размер библиотеки.

Новые типы возврата рендеринга: фрагменты и строки.

Теперь вы можете вернуть массив элементов из метода рендеринга компонента. Аналогично другим массивам, но вам нужно добавить ключ к каждому элементу, чтобы избежать предупреждений:


      
render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

В будущем мы, вероятно, добавим в JSX специальный синтаксис шарда, который не требует ключей.

Мы также добавили поддержку возврата строк:


      
render() {
  return 'Look ma, no spans!';
}

См. полный список поддерживаемых типов возврата.

улучшенная обработка ошибок

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

Вместо того, чтобы удалять все приложение каждый раз, когда возникает ошибка, вы можете использовать границы ошибок. Границы ошибок — это специальные компоненты, используемые для обнаружения ошибок внутри поддерева и предоставления вместо них резервного пользовательского интерфейса. Границы ошибок можно рассматривать как подобные операторам try-catch, но для компонентов React.

Для получения более подробной информации ознакомьтесь с нашимПредыдущая статья об обработке ошибок в React 16.

Portals

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


      
render() {
  // React does *not* create a new div. It renders the children into `domNode`.
  // `domNode` is any valid DOM node, regardless of its location in the DOM.
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

допустимыйДокументация по порталамПосмотрите готовый пример.

улучшенный рендеринг на стороне сервера

React 16 включает полностью переписанный серверный рендерер. Это действительно быстро. служба поддержкипоток, чтобы вы могли быстрее отправлять данные клиенту. В то же время из-зановая стратегия упаковкит.е. компиляция больше не происходитprocess.envПроверьте (верьте или нет, читайте в Node.process.envдействительно медленно! ), вам больше не нужно упаковывать React для хорошей производительности рендеринга на сервере.

Член основной команды Саша Айкин написалаХорошее описание Улучшения рендеринга на стороне сервера React 16. Согласно всесторонним тестам Саши, рендеринг на стороне сервера React 16 примерно быстрее, чем React 15.три раза. "сprocess.envСравнивая React 15 после компиляции, можно отметить улучшение производительности примерно в 2,4 раза в Node 4, примерно в 3,0 раза в Node 6 и в 3,8 раза в недавно выпущенном Node 8.4. По сравнению с нескомпилированным React 15, React 16 имеет прирост в рендеринге на стороне сервера в последней версии Node! (По словам Саши, обратите внимание, что эти цифры основаны на синтетических тестах и не обязательно отражают реальную производительность.)

Кроме того, React 16 лучше сохраняет HTML-код на стороне сервера, когда он достигает клиента. Больше не требуется, чтобы первоначальный рендеринг точно соответствовал результату рендеринга на стороне сервера. Вместо этого он пытается максимально повторно использовать существующие элементы DOM. Больше никаких контрольных сумм! Вообще говоря, мы не рекомендуем отображать другой контент на стороне клиента и на стороне сервера, но в некоторых случаях это может быть полезно (например, временные метки).

ПроверитьоReactDOMServerдокументацияУзнать больше деталей.

Поддержка пользовательских свойств DOM

Реагировать сейчасПередать пользовательские свойства в DOMвместо того, чтобы игнорировать нераспознанные атрибуты HTML и SVG. Это позволило нам не вести белый список функций React и уменьшить размер файла.

Уменьшить размер файла

Помимо этого, React 16 действительно меньше, чем 15.6.1!

reactРазмер уменьшен с 20,7 КБ (сжатый gzip: 6,9 КБ) до 5,3 КБ (сжатый gzip: 2,2 КБ).
react-domУменьшен со 141 КБ (сжатый gzip: 42,9 КБ) до 103,7 КБ (сжатый gzip: 32,6 КБ).
react + react-domУменьшен с 161,7 КБ (сжатый: 49,8 КБ) до 109 КБ (сжатый: 34,8 КБ)

Сочетание двухПо сравнению с предыдущей версией объем уменьшен на 32% (30% после gzip).

В основном из-за изменений в пакете разного объема. Реагировать сейчасRollupсгладить упаковку для работы с различными целевыми форматами, что улучшает размер и производительность. Плоский формат пакета также означает, что React оказывает примерно одинаковое влияние на размер пакета независимо от того, как вы запускаете свое приложение, будь то использование Webpack, Browserify, предварительно созданных пакетов UMD или других систем.

протокол Массачусетского технологического института

на случай, если ты пропустишь, React 16 использует лицензию MIT. Мы также выпустили React 15.6.2 под лицензией MIT для тех, кто не может сразу обновиться.

новая базовая архитектура

React 16 — это первый выпуск, использующий новую базовую архитектуру сверху под кодовым названием «Fiber». ты сможешьИнженерный блог FacebookУзнайте об этом проекте. (Спойлер: мы переписали React!)

Fiber отвечает за большинство новых функций в React 16, таких как границы ошибок и фрагменты. И вы можете ожидать, что в следующих нескольких выпусках мы разблокируем больше потенциальных функций React.

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

Этот пример является предшественником проблем, которые может решить асинхронный рендеринг:

Мы рассмотрели, что такое «асинхронный рендеринг»? Демо демонстрирует, как координировать асинхронное дерево React React без работы.t.co/3snoahB3uV pic.twitter.com/egQ988gBjR
— Эндрю Кларк (@acdlite)September 18, 2017

Подсказка: следите за вращающимся черным квадратом.

Мы считаем, что асинхронный рендеринг — это большой шаг вперед, представляющий будущее React. Чтобы обеспечить максимально плавный переход на версию 16.0, в настоящее время мы по-прежнему не поддерживаем асинхронные функции, но мы с нетерпением ждем их развертывания в ближайшие несколько месяцев. Будьте обеспокоены!

Установить

React v16.0.0 доступен для установки через npm.

Чтобы установить React 16 через Yarn, выполните:


      
yarn add react@^16.0.0 react-dom@^16.0.0

Чтобы установить React 16 через npm, выполните:


      
npm install --save react@^16.0.0 react-dom@^16.0.0

Мы также предоставляем React, созданный с помощью UMD, через CDN:


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

Подробно об инструкции по установкеДокументацию можно посмотреть.

Обновить

Хотя React 16 содержит серьезные внутренние изменения, с точки зрения обновлений вы можете думать об этом как о других основных выпусках React. Мы обслуживаем пользователей Facebook и Messenger.com с помощью React 16 с начала этого года и выпустили несколько бета-версий и исправлений для решения дополнительных проблем. За исключением мелких аварий.Если ваше приложение работает на 15.6 без каких-либо предупреждений, оно должно нормально работать и на 16.

новое устаревание

Контейнеры, отображаемые на сервере, теперь имеют более четкое определение API. Если вы хотите повторно использовать HTML-код, отображаемый на сервере, используйтеReactDOM.hydrateвместоReactDOM.render. Продолжайте использовать, если вы просто хотите выполнять рендеринг на стороне клиента.ReactDOM.renderВот и все.

Реагировать надстройки

Как было сказано ранее, мыБольше не добавляет поддержку React Addons.. Мы ожидаем, что каждый дополнительный комплект (кромеreact-addons-perf; просмотреть ранее) будет продолжать работать в обозримом будущем, но мы не будем выпускать дополнительные обновления.

оСовет как мигрироватьВы можете обратиться к предыдущему блогу.

react-addons-perfНе могу продолжать работать в React 16. Мы можем выпустить новую версию инструмента позднее. В то же время вы можетеИспользуйте инструмент производительности вашего браузера для измерения компонентов React.

возобновить

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

React 15 использовалunstable_handleErrorОграничено тем, что больше не предоставляет документальную поддержку границ ошибок. Метод был переименован вcomponentDidCatch. Вы можете использовать codemod дляАвтоматически переносить код на новый API.
Если вызывается внутри метода жизненного циклаReactDOM.renderа такжеReactDOM.unstable_renderIntoContainer, он возвращает ноль. Чтобы заставить его работать, вы можете использоватьportalsилиrefs.
setState:
- вызов с нулемsetStateОбновления больше не запускаются. Это позволяет вам определить, хотите ли вы выполнить повторный рендеринг в функции обновления.
- Вызывается в методе рендерингаsetStateвызовет обновление. Это отличается от того, что было раньше. Вы все равно не должны вызывать setState при рендеринге.
- setStateФункция обратного вызова (второй параметр) теперь будет вcomponentDidMount / componentDidUpdateЗапускается сразу после этого, а не ждет, пока все компоненты отрендерятся.
когда используешь<B />заменить<A />,B.componentWillMountСейчас вA.componentWillUnmountсрабатывать раньше. Раньше в некоторых случаяхA.componentWillUnmountсработает немедленно.
Раньше изменение ссылки на компонент всегда приводило к разыменовыванию компонента перед его визуализацией. Теперь при изменении узла DOM мы постулируем упомянутые корректировки.
Рендеринг в контейнер, не модифицированный React, небезопасен. Раньше это работало в некоторых случаях, но React больше не поддерживает это. Теперь мы запускаем предупреждение в этом случае. Вы должны очистить дерево компонентов, используяReactDOM.unmountComponentAtNodeс компонент.Посмотрите этот пример.
componentDidUpdateМетоды жизненного цикла больше не будут передаватьсяprevContextпараметр. (Проверить#8631)
Мелкий рендерер больше не вызываетсяcomponentDidUpdateПотому что ссылки DOM недоступны. Это также иcomponentDidMountчтобы быть последовательным (предыдущие версии также не вызывалиcomponentDidMount).
Мелкий рендерер больше не реализованunstable_batchedUpdates

Мешок

больше нетreact/lib/*а такжеreact-dom/lib/*. React и ReactDOM предварительно компилируются в отдельные файлы («плоские пакеты») даже в среде CommonJS. Если вы ранее полагались на внутренние методы React, которые не задокументированы в документации, они больше недействительны.Вы можете объяснить свою конкретную ситуацию в новом выпуске, и мы постараемся предоставить вам предложения по миграции.
больше нетreact-with-addons.jsСоберите пакет. Все совместимые дополнения публикуются отдельно на npm, а также есть однофайловые браузерные версии, если они вам нужны.
Устаревание, введенное в 15.x, было удалено из основного пакета.React.createClassдоступныйcreate-react-classзаменить,React.PropTypesиспользоватьprop-typesвместо,react-dom-factoriesзаменитьReact.DOM,react-dom/test-utilsзаменитьreact-addons-test-utilsИ неглубокий рендерreact-test-renderer/shallow. Проверить15.5.0а также15.6.0Сообщение в блоге с советами по миграции кода и автоматическим модификациям кода (codemods).
Скорректированы имена и пути для однофайловых сборок браузера, чтобы подчеркнуть различия между сборками разработки и производства. Например:
- react/dist/react.js→react/umd/react.development.js
- react/dist/react.min.js→react/umd/react.production.min.js
- react-dom/dist/react-dom.js→react-dom/umd/react-dom.development.js
- react-dom/dist/react-dom.min.js →react-dom/umd/react-dom.production.min.js

Требования к среде JavaScript

React 16 полагается на типы коллекцийMapа такжеSet. Если вы хотите поддерживать старые браузеры и устройства, которые могут не иметь встроенной поддержки (например, IE core-jsилиbabel-polyfill.

Среда полифилла React 16, использующая core-js для поддержки старых браузеров, выглядит примерно так:


      
import 'core-js/es6/map';
import 'core-js/es6/set';

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Реакция также зависит отrequestAnimationFrame(даже в тестовой среде). Простая прокладка в тестовой среде выглядит следующим образом:


      
global.requestAnimationFrame = function(callback) {
  setTimeout(callback, 0);
};

благодарный

Как всегда, этот релиз был бы невозможен без вклада сообщества открытого исходного кода. Спасибо всем, кто сообщал об ошибках, открывал PR, отвечал на вопросы, писал документацию и всем, кто внес свой вклад!

Особая благодарность нашим основным участникам, особенно за их отличный вклад в течение цикла предварительного выпуска за последние несколько недель:Brandon Dail,Jason Quense,Nathan Hunzaker,а такжеSasha Aickin.

Edit this page