React v16.6.0: lazy, memo и contextType

Октябрь 23, 2018 Sebastian Markbåge

Сегодня мы выпускаем React 16.6 с несколькими новыми удобными функциями. Форма PureComponent/shouldComponentUpdate для компонентов-функций, способ разбиения кода с использованием приостановки и более простой способ потребления контекста из компонентов-классов.

Изучите полный список изменений ниже.

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

    
  const MyComponent = React.memo(function MyComponent(props) {
    /* перерисовывается только при изменении props */
  });
  

Возможно, вы видели выступление Дэна о React Suspense на JSConf Iceland. Теперь вы можете использовать компонент Suspense для разбиения кода, оборачивая динамический импорт в вызов React.lazy().

    
  import React, {lazy, Suspense} from 'react';
  const OtherComponent = lazy(() => import('./OtherComponent'));
  
  function MyComponent() {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    );
  }
  

Также в будущем компонент Suspense позволит авторам библиотек реализовывать извлечение данных с поддержкой приостановки.

В React 16.3 мы ввели официальный API-интерфейс контекста в качестве замены предыдущего устаревшего.

    
  const MyContext = React.createContext();
  

Мы слышали отзывы о том, что примение нового render prop API может оказаться сложным в компонентах-классах. Поэтому мы добавили удобный API для потребления значения контекста внутри компонента-класса.

    
  class MyClass extends React.Component {
    static contextType = MyContext;

    componentDidMount() {
      let value = this.context;
      /* выполните сторонний эффект при монтировании, используя значение MyContext */
    }

    componentDidUpdate() {
      let value = this.context;
      /* ... */
    }

    componentWillUnmount() {
      let value = this.context;
      /* ... */
    }

    render() {
      let value = this.context;
      /* отрисуйте что-либо, основанное на значении MyContext */
    }
  }
  

В React 16 введены границы ошибок для обработки ошибок, возникающих при отрисовке. У нас уже есть метод жизненного цикла componentDidCatch, который срабатывает после того, как ошибка уже произошла. Он отлично подходит для регистрации ошибок на сервере, а также позволяет вам показать альтернативный UI пользователю, вызвав setState.

Перед тем, как он сработает, мы отрисовываем null вместо дерева, которое выдало ошибку. Иногда это ломает родительские компоненты, которые не ожидают, что их ссылки ref будут пустыми. Он также не работает для восстановления после ошибок на сервере, поскольку методы жизненного цикла Did не запускаются во время отрисовки на стороне сервера.

Мы добавляем еще один метод, который позволяет отрисовывать резервный UI до завершения отрисовки. См. документацию для getDerivedStateFromError().

В 16.3 мы представили компонент StrictMode. Он позволяет включить ранние предупреждения для шаблонов, которые могут вызвать проблемы в будущем.

Мы добавили еще два элемента в список устаревших API в StrictMode. Если вы не используете StrictMode, вам не нужно беспокоиться - эти предупреждения для вас не сработают.

• ReactDOM.findDOMNode() Этот API часто неправильно понимают, и в большинстве случаев его использование не обязательно. Также в React 16 он, к удивлению, может быть медленным. Смотрите документацию о возможных путях апгрейда.

• Устаревший контекст: использование contextTypes и getChildContext. Устаревший контекст делает React немного медленнее и больше, чем нужно. Именно поэтому мы настоятельно рекомендуем перейти на новый API контекста. Надеемся, что добавление contextType API немного упростит задачу.

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

React v16.6.0 доступен в реестре npm.

Чтобы установить React 16 с помощью Yarn, запустите:

    
  yarn add [email protected]^16.6.0 [email protected]^16.6.0
  

Чтобы установить React 16 с помощью npm, запустите:

    
  npm install --save [email protected]^16.6.0 [email protected]^16.6.0
  

Мы также предоставляем UMD-сборки React на CDN:

    
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
  

Обратитесь к документации для получения подробных инструкций по установке.

React

• Добавлен React.memo() в качестве альтернативы PureComponent для функций. ()

• Добавлен React.lazy() для разбиения кода компонентов. ()

• React.StrictMode теперь предупреждает об устаревшем API контекста. ()

• React.StrictMode теперь предупреждает о findDOMNode. ()

• Переименование unstable_AsyncMode в unstable_ConcurrentMode. ()

• Переименование unstable_Placeholder в Suspense, и delayMs в maxDuration. ( и )

React DOM

• Добавление contextType как более эргономичного способа подписки на контекст из класса. ()

• Добавлен метод жизненного цикла getDerivedStateFromError для отлова ошибок в будущей асинхронной отрисовке на стороне сервера. ()

• Предупреждение, когда вместо <Context.Consumer> используется <Context>. ()

• Исправление серого оверлея на iOS Safari. ()

• Исправлена ошибка, вызванная перезаписью window.event в режиме разработки.

React DOM Server

• Добавлена поддержка React.memo(). ()

• Добавлена поддержка contextType. ()

Scheduler (экспериментальный)

• Переименование пакета в scheduler. ()

• Поддержка уровней приоритетов, продолжений и обернутых обратных вызовов. ( и )

• Улучшение механизма резерва в средах, не относящихся к DOM. ()

• Запланировать requestAnimationFrame ранее. ()

• Исправлено обнаружение DOM, теперь оно работает более тщательно. ()

• Исправлены ошибки, связанные с отслеживанием взаимодействия. ()

• В пакет добавлено преобразование envify. ()