React 16.3 уже здесь: с совершенно новым Context API

Node.js React.js Redux
React 16.3 уже здесь: с совершенно новым Context API

Обзор статьи

Реагировать в версии16.3-alphaПредставлен новый Context API, и сообщество с нетерпением ждет его. Давайте сначала посмотрим, как выглядит новый Context API на простом примере, а затем кратко обсудим значение нового API.

Полный пример кода в этой статье можно найти на GitHub автора,Нажмите на портал.

Взгляните на новый Context API

необходимо установить16.3-alphaверсия реакции. Этапы строительства не являются предметом этой статьи, вы можете обратиться к авторудемо на GitHub.

npm install react@next react-dom@next

Ниже посмотрите непосредственно на код, если он используетсяreact-reduxЭто должно быть знакомо.

Сначала создайтеcontextПример:

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

// 创建context实例
const ThemeContext = React.createContext({
  background: 'red',
  color: 'white'
});

Затем определитеAppкомпонент, обратите внимание, что он используется здесьProviderКомпонент, аналогичныйreact-reduxизProviderкомпоненты.

class App extends React.Component {

  render () {
    return (
      <ThemeContext.Provider value={{background: 'green', color: 'white'}}>
        <Header />
       </ThemeContext.Provider>
    );
  }
}

Далее определитеHeader,Titleкомпоненты. Уведомление:

  1. Titleиспользуются компонентыConsumerкомпонент, который означает потребностьProviderпереданные данные.
  2. TitleкомпонентAppиз孙компонент, но пропущенHeaderданные о потреблении.
class Header extends React.Component {
  render () {
    return (
      <Title>Hello React Context API</Title>
    );
  }
}

class Title extends React.Component {
  render () {
    return (
      <ThemeContext.Consumer>
        {context => (
          <h1 style={{background: context.background, color: context.color}}>
            {this.props.children}
          </h1>
        )}
      </ThemeContext.Consumer>
    );
  }
}

Наконец-то нормальная работа

ReactDOM.render(
  <App />, 
  document.getElementById('container')
);

Взгляните на результат работы программы:

Зачем нужен новый Context API

использовалredux + react-reduxЕсли вы студент, вы должны найти новый Context API очень знакомым. и виделreact-reduxИзучающие исходный код будут знать,react-reduxОн основан на старой версии Context API.

Зачем нужен новый Context API, когда уже есть решения?

  1. Есть определенные проблемы в реализации существующего Context API: например, когда родительский компонентshouldComponentUpdateОптимизация производительности может привести к тому, что подкомпоненты, использующие контекстные данные, не будут обновляться.
  2. Снижение сложности: такие решения, как ведро семейства redux, вносят определенную степень сложности в проект, особенно для учащихся, которые недостаточно знают о решении, они могут растеряться, когда столкнутся с проблемами. Внедрение нового Context API может в определенной степени снизить зависимость многих проектов от корзины семейства redux.

Для получения дополнительной информации, пожалуйста, обратите внимание на мою общедоступную учетную запись и обновите ее позже.

написать на обороте

Лично новый Context API больше ожидает улучшения производительности. Что касается уменьшения сложности, замены избыточности и т. д., это не моя цель. Следующим планом является создание нескольких точечных вариантов использования для сравнительного тестирования.

Ссылки по теме

Полный пример кода из этой статьи

RFC для нового контекста RACT API

Категории