---
title: Context API
localeTitle: Context API
---
# Context API
Новый Context API был реализован в версии React 16.3.
Он существовал и раньше, однако находился в бета-версии, и, таким образом, не имел возможности предоставить инструменты для работы с его помощью.
Цель 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 (
It’s {value.time} !
It’s 17:00 !
``` ### Динамическое изменение контекста Чтобы изменить значение параметра время (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 (It’s {value.time} !
} setTime(e.target.value)} />