Контекстный API

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

создатьконтекст

Чтобы начать с Context API, первое, что нам нужно сделать, это создать контекст, используя функцию createContext из React.

const ThemeContext = createContext('Dark');

Функция createContext принимает начальное значение, но это начальное значение не требуется.

Провайдер

Компонент Provider будет использоваться для упаковки компонентов, которые будут иметь доступ к нашему контексту.

<ThemeContext.Provider value={this.state.theme}>
...
</ThemeContext.Provider>

Компонент Provider получает реквизит с именем value, к которому можно получить доступ из всех компонентов, заключенных внутри Provider, и он будет отвечать за предоставление доступа к данным контекста.

Потребитель

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

Компонент Consumer позволяет компоненту React подписываться на изменения контекста. Компонент делает данные доступными с помощью свойства рендеринга.

<ThemeContext.Consumer>
  {(theme)=> <h1>Theme, {theme}</h1>}
</ThemeContext.Consumer>

использовать контекстный хук

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

const theme = useContext( ThemeContext );

Компонент useContext намного лучше и чище, чем компонент Consumer — мы можем легко понять, что происходит, и повысить удобство сопровождения нашего приложения.

Для получения дополнительной информации см. руководство по реакции для контекста