Что вам нужно знать о React 16

3 min readOct 1, 2017

Перевод статьи What you need to know about React 16

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

Fiber

Fiber - это основной алгоритм React. В основном это движок, который активирует React. Fiber — это не API, с которым разработчики взаимодействуют при создании приложений. Полная перезапись позволила основной команде добавить поддержку асинхронного рендеринга (улучшенная производительность для больших деревьев компонентов), обработка ошибок и другие функции. Больше деталей здесь.

Server Side Rendering

Метод render () был заменен на hydrate () специально для рендеринга на стороне сервера.

hydrate(<App/>, document.getElementById("root"));

HTML-элементы больше не будут генерироваться с атрибутами data-reactid, теперь вывод HTML будет точно таким же, как вы его пишете. Обработка ошибок и “порталы” (обсуждаемые ниже) пока не поддерживаются в SSR. Теперь React в development настолько же эффективен, как и в production.
В целом, React 16 в 3,8 раз быстрее, чем React 15 (SSR). И чтобы еще больше повысить производительность, React 16 теперь поддерживает рендеринг непосредственно в Node stream. Больше деталей здесь.

Error Handling

Было очень неприятно видеть ярко-красный экран ошибок каждый раз, когда была ошибка JS при разработке приложений React. Уже нет. Приветствуем componentDidCatch(), новый метод жизненного цикла, введенный в React 16. Он позволяет захватывать и обрабатывать любые ошибки JavaScript. Это декларативная версия React версии try {} catch block. Больше деталей здесь.

Render elements outside components

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

render() {
    return ReactDOM.createPortal(
      <div className="modal">
        {this.props.children}
      </div>,
      document.createElement('div')
    );
  }

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

Support for custom HTML attributes

Теперь можно передавать пользовательские атрибуты HTML без предупреждений. В дополнение ко всем стандартным атрибутам DOM, data- и aria- атрибутам, вы можете добавить свои собственные.

<div unicornindex="1">🦄</div>

Все стандартные атрибуты по-прежнему должны использовать верблюжий регистр (camelCase). Больше деталей здесь.

Render arrays and strings

В компоненте весь отображаемый контент должен был быть обернут в один элемент DOM, например div или span. React 16 поддерживает массив элементов или просто текст. Не нужно обертывать контент, незначительные изменения, но очень удобно.

const ListItems = () => (
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
);const Text = () => ('This is just plain text')

State performance improvement

Вызов setState с null больше не вызывает обновление. Это позволяет вам принять решение в функции обновления, если вы хотите сделать re-render. Это полезно для производительности, теперь вы можете проверить какое-либо событие, если состояние не обновлено, установить его равным null и оно не будет повторно отображать компонент.

getUserName = (user) => {
    const newName = user.name;
    this.setState(state => {
      if (state.username === newName) {
        return null;
      } else {
        return { username: newName};
      }      });
  };

Breaking change

Устаревшие PropTypes были удалены и его отдельный пакет, то же самое с React.createClass и response-addons-test-utils. Теперь React 16 полагается на Map и Set, поэтому убедитесь, что вы по-прежнему используете babel для старых браузеров, которые не поддерживают это.

MIT licensed

Так много драмы произошло через лицензирование Facebook’ом React, GraphQL и других библиотек. Многие люди были обеспокоены патентами. Основатель WordPress даже решил переписать пользовательский интерфейс администратора на Vue (в настоящее время на React). Больше не волнуйтесь. Facebook объявила, что React, GraphQL и Jest переведены в MIT. Падение всех патентов, и теперь это полностью открытый источник. Больше деталей здесь.

Проблем при обновлении до последней версии появляться не должно, либо они должны быть не значительными. Должны…