Реагистрировать 16 обновлений с первого взгляда

Архитектура внешний интерфейс JavaScript API React.js
Реагистрировать 16 обновлений с первого взгляда

Буквально сегодня команда React официально выпустила React 16. Что принесет этот релиз?

Совершенно новая внутренняя структура

  • React 16 имеет совершенно новую внутреннюю архитектуру под названием «Fiber». Официальное объяснение Fiber состоит из одного предложения: «React Fiber — это повторная реализация основного алгоритма».
  • В предыдущем методе обновления под названием «Стек», используемом React, стек вызовов задачи с длинной цепочкой вызовов и большим объемом вычислений будет следующим:
    v2-d8f4598c70df94d69825f11dfbf2ca2c_b--1-
  • Через «Fiber» React позволяет разделить и разделить большое количество вычислений, а также сделать их асинхронными. После каждого процесса обновления передайте управление модулю React, отвечающему за координацию задач, чтобы узнать, есть ли другие срочные задачи. Это обеспечивает частоту кадров рендеринга и повышает скорость отклика приложений. Каждая впадина на приведенном ниже рисунке представляет собой процесс выполнения глубокого проникновения в сегмент, а каждый пик — это время, когда выполнение сегмента завершается и возвращается управление:
    v2-78011f3365ab4e0b6184e1e9201136d0_b-1
  • На React Conf в начале этого года разработчики ReactЗнакомит с принципом работы и практическим эффектом волокна.. В демоверсии частота кадров рендеринга очень глубокого дерева компонентов до и после использования Fiber была значительно улучшена (видео около 3:30).

Добавлен новый API верхнего уровня:ReactDOM.createPortal

  • Портал сам по себе не новая концепция. Мы также использовали его в прошлом при использовании React для реализации таких компонентов, как модальные окна. Теперь React официально предоставляет API, чтобы упростить реализацию таких функций.
  • В общей структуре React отношение вложения компонентов согласуется с отношением вложения визуализируемого DOM (DOM, визуализируемый дочерним компонентом, должен находиться внутри DOM, визуализируемого родительским компонентом).
  • Но в некоторых случаях такие ограничения могут вызывать проблемы, например при реализации модального окна (Modal), хотя компонент, в котором находится модальное окно, находится внутри его родительского компонента, но обычно его нужно отрисовывать вbodyСледующий элемент. Новый API используется следующим образом:
render() {
  // React 会在你提供的 domNode 下渲染，而不是在当前组件所在的 DOM
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}
  • Более подробную информацию можно посмотретьPortals.

renderметод может возвращать массив

  • Раньше компонентrenderВ методе, если вы хотите вернуть более одногоelement, они должны быть обернуты элементом. Это может привести к большому количеству ненужных вложений.
  • Теперь вы можете написать так:
render() {
  // 不需要再包裹一层了！
  return [
    // 但是要使用 key
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}
  • Возврат только строки также поддерживается:
render() {
  return 'Look ma, no spans!';
}

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

  • Раньше, если React сталкивался с ошибкой во время выполнения, приложение аварийно завершало работу (как и в случае обычных ошибок во время выполнения JavaScript, последующий код не выполнялся).
  • Теперь React добавляет компонентыcomponentDidCatch(error, info)Функция жизненного цикла компонента, вы можете определить функцию обработки ошибок компонента, чтобы, когда компонент сталкивается с ошибкой во время выполнения, он увеличивалtry...catchТо же самое, ошибка не будет выдаваться напрямую, ошибка будет локальной компонентойcatchlive, обеспечивая доступность всего приложения.
  • В то же время React также предоставляет более понятные подсказки об ошибках, чтобы помочь разработчикам лучше находить проблемы.
  • Подробности можно посмотретьError Handling in React 16.

Меньший размер

  • В Реакции 16,react + react-domОбщий размер после gizp составляет 109 КБ, что на 30% меньше, чем 161,7 КБ в предыдущей версии.

Некоторые неосновные модули были удалены

  • React.createClass,React.PropTypesподождите, пока модуль будет удаленreactpackage, теперь вам нужно импортировать из отдельного пакета.

На основании лицензии MIT

  • Теперь React 15.6.2 и React 16 основаны на лицензии MIT, вы можете свободно выбирать.

Ознакомьтесь с полным журналом измененийReact v16.0.

Категории