API контекста реакции

Контекстный API был введен, чтобы позволить вам передавать состояние (и разрешать обновление состояния) через приложение без необходимости использовать для этого реквизиты.

Команда React предлагает придерживаться реквизита, если вам нужно пройти всего несколько уровней детей, потому что это все еще гораздо менее сложный API, чем контекстный API.

Во многих случаях это позволяет нам избежать использования Redux, значительно упрощая наши приложения, а также обучаясь использованию React.

Как это работает?

Вы создаете контекст с помощью React.create Context() , который возвращает объект контекста.:

const { Provider, Consumer } = React.createContext()

Затем вы создаете компонент-оболочку, который возвращает компонент Поставщик , и добавляете в качестве дочерних все компоненты, из которых вы хотите получить доступ к контексту:

class Container extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      something: 'hey'
    }
  }

  render() {
    return (
      {this.props.children}
    )
  }
}

class HelloWorld extends React.Component {
  render() {
    return (
      
        
      
    )
  }
}

Я использовал контейнер в качестве имени этого компонента, потому что это будет глобальный поставщик. Вы также можете создавать меньшие контексты.

Внутри компонента, заключенного в поставщика, вы используете компонент Потребитель для использования контекста:

class Button extends React.Component {
  render() {
    return (
      
        {context => {context.state.something}}
      
    )
  }
}

Вы также можете передавать функции в значение Поставщика, и эти функции будут использоваться Потребителем для обновления состояния контекста:

 this.setState({something: 'ho!'})}}>
  {this.props.children}


/* ... */

  {(context) => (
    {context.state.something}
  )}

Вы можете увидеть это в действии в этом глюке .

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

При использовании нескольких файлов вы создаете содержимое в одном файле и импортируете его во все места, где вы его используете:

//context.js
import React from 'react'
export default React.createContext()

//component1.js
import Context from './context'
//... use Context.Provider

//component2.js
import Context from './context'
//... use Context.Consumer

Оригинал: “https://flaviocopes.com/react-context-api/”