diff --git a/guide/russian/react/context-api/index.md b/guide/russian/react/context-api/index.md new file mode 100644 index 0000000000..d4459d5f01 --- /dev/null +++ b/guide/russian/react/context-api/index.md @@ -0,0 +1,155 @@ +# 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 ( + + {this.props.children} + + ); + } +} + +export default TimeProvider; +``` + +Нам нужно немного настроить компонент, который будет вызывать дочерний элемент, который, в свою очередь, должен принимать наш контекст (в данном случае ). + +```javascript +// index.js +import React from "react"; +import ReactDOM from "react-dom"; +import { ShowTime} from "./ShowTime"; + +// Importing our provider +import TimeProvider from "./utils/timeProvider"; + +// Calling our Hello component inside our provider +function App() { + return ( + + + + ); +} + +const rootElement = document.getElementById("root"); +ReactDOM.render(, rootElement); +``` + +## Consumer + +Давайте в файле ShowTime.js вызовем передоваемое значение времени (time) с использованием потребителя (Consumer): + +```javascript +// on ShowTime.js +import React from “react”; + +import { TimeContext } from “./utils/TimeProvider”; + +export default () => ( + + {value =>

It’s {value.time} !

} +
+); +``` + +Данный фрагмент кода должен преобразоваться: + +```javascript +

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 ( + + {this.props.children} + + ); + } +} + +export default TimeProvider; +``` + +И вернемся к нашему компоненту Consumer: + +```javascript +// on ShowTime.js +import React from “react”; + +import { TimeContext } from “./utils/TimeProvider”; + +export default () => ( + + {value =>

It’s {value.time} !

} + setTime(e.target.value)} /> +
+); +``` + +Это даст нам возможность изменять параметр времени (time), которое будет отображаться. + +Необходимо запомнить три вещи: +- Создайте компонент Provider, который будет управлять нашими совместно используемыми данными (также называемый хранилищем - Store) +- Создайте компонент Consumer, который будет связываться с хранилищем +- Вложите наш потребительский компонент (Consumer) с созданным провайдером (Provider), чтобы он мог использовать его данные + +### Дополнительная информация + +- [React - Context Official Documentation ](https://reactjs.org/docs/context.html) + + +