Он существовал и раньше, однако находился в бета-версии, и, таким образом, не имел возможности предоставить инструменты для работы сего помощью.
Цель Context API - позволить разработчикам осуществлять взаимодействие между компонентами без сложных инструментов, не требуя, чтобы они были тесно связаны (связь компонентов типа родитель/дитя).
Это также уменьшает необходимость в многочисленных передачах свойств (props) (пропускание свойств через несколько нижерасположенных компонентов), что позволяет писать более чистый код, упростить его обслуживание и обновление.
Возможности данного API полностью раскрываются, когда мы хотим поделиться данными, к которым будут иметь доступ несколько компонентов.
Context API основывается на двух вещах: компонентах Provider и Consumer.
## Provider
Предположим, в файле TimeProvider.js, созданном исключительно для обеспечения данными, мы хотим разделить некоторое свойство time между компонентами.
```javascript
// Import createContext
import React, { createContext, Component } from 'react';
// Initialize a context with a time value to it
export const TimeContext = createContext({
time: '',
});
// Create the TimeProvider class to be used by index.js as a provider and initialize a default value
class TimeProvider extends Component {
state = {
time: '17:00',
};
// Passing the state that we just set as value to be used by our consumer and returning its children
render() {
return (
<TimeContext.Providervalue={this.state}>
{this.props.children}
</TimeContext.Provider>
);
}
}
export default TimeProvider;
```
Нам нужно немного настроить компонент, который будет вызывать дочерний элемент, который, в свою очередь, должен принимать наш контекст (в данном случае <ShowTime/>).
Чтобы изменить значение параметра время (time), которое мы передаем компоненту ShowTime, нам нужно предоставить нашему контексту функцию, которая может использоваться потребителем для обновления значения.
Давайте просто добавим его в наш компонент Provider
```javascript
// utils.TimeProvider.js
...
// This time we initialize a function to set the time
export const TimeContext = createContext({
time: "",
setTime: () => {}
});
// We define the setTime function to store the time we’ll give it
class TimeProvider extends Component {
state = {
time : "17:00",
setTime: time => this.setState({ time : time })
};
render() {
return (
<TimeContext.Providervalue={this.state}>
{this.props.children}
</TimeContext.Provider>
);
}
}
export default TimeProvider;
```
И вернемся к нашему компоненту Consumer:
```javascript
// on ShowTime.js
import React from “react”;
import { TimeContext } from “./utils/TimeProvider”;