---
title: Контекст и передача данных
seo:
  title: Контекст и передача данных — React Developer
  description: 'Тема «Контекст и передача данных» для собеседования React Developer. Что такое контекст (context) в React и для чего он используется? Как работает механизм "контекста" (context) для передачи данных?'
---

[Все темы React Developer](/react-developer)

## <strong>Что такое контекст (</strong><code>context</code><strong>) в React и для чего он используется?</strong> [#q-14bee738d69b8164a383e043874dd796]

<strong>Контекст (</strong>
<code>Context</code>
<strong>)</strong> — это механизм, который позволяет передавать данные через
дерево компонентов без необходимости передавать пропсы на каждом уровне.

#### Основные характеристики&#58;

{/* prettier-ignore */}
1. <strong>Обмен данными между компонентами</strong>&#58;

    - Используется для обмена данными между компонентами, которые находятся на разных уровнях вложенности.

1. <strong>Создание и использование контекста</strong>&#58;

    - Создается с помощью <code>React&#46;createContext</code>.

    - Обеспечивает доступ к данным через компоненты <code>Provider</code> и <code>Consumer</code>.

#### Пример&#58;

```jsx
import React, { createContext, useContext } from "react";

const MyContext = createContext();

const MyProvider = ({ children }) => {
  const value = "Hello, World!";
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
};

const MyComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

const App = () => (
  <MyProvider>
    <MyComponent />
  </MyProvider>
);

export default App;
```

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

:::note[Ссылки для изучения]

1. [Контекст в React](https://reactdev.ru/archive/react16/context/)
   :::

---

## <strong>Как работает механизм "контекста" (</strong><code>context</code><strong>) для передачи данных?</strong> [#q-14bee738d69b81069d3def5a4a244346]

<strong>Контекст (</strong>
<code>Context</code>
<strong>)</strong> — это механизм, который позволяет передавать данные через
дерево компонентов без необходимости передавать пропсы на каждом уровне.

#### Основные шаги&#58;

{/* prettier-ignore */}
1. <strong>Создание контекста</strong>&#58;

    - Создайте контекст с помощью <code>React&#46;createContext</code>.

    ```javascript
    const MyContext = React.createContext();
    ```

1. <strong>Обертка компонентов в Provider</strong>&#58;

    - Используйте компонент <code>Provider</code> для обертки тех компонентов, которые должны иметь доступ к контексту. Укажите значение, которое должно быть передано через контекст.

    ```jsx
    <MyContext.Provider value={/* значение */}>
      {/* дочерние компоненты */}
    </MyContext.Provider>
    ```

1. <strong>Потребление контекста</strong>&#58;

    - Компоненты, которые должны получать данные из контекста, могут использовать компонент <code>Consumer</code> или хук <code>useContext</code>.

    ```javascript
    // Использование хука useContext
    const value = useContext(MyContext);
    ```

#### Пример&#58;

```jsx
import React, { createContext, useContext } from "react";

// Создание контекста
const MyContext = createContext();

// Компонент Provider
const MyProvider = ({ children }) => {
  const value = "Hello, World!";
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
};

// Компонент Consumer с хуком useContext
const MyComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

// Основное приложение
const App = () => (
  <MyProvider>
    <MyComponent />
  </MyProvider>
);

export default App;
```

Контекст в React позволяет передавать данные через дерево компонентов с помощью компонентов <code>Provider</code> и <code>Consumer</code>, а также хука <code>useContext</code>, упрощая обмен данными между компонентами на разных уровнях вложенности.

:::note[Ссылки для изучения]

1. [Контекст в React](https://reactdev.ru/archive/react16/context/)
   :::

---

## <strong>Что такое "передача данных через контекст" (</strong><code>context passing</code><strong>) в React?</strong> [#q-14bee738d69b81c790a8e10936de08ef]

<strong>Передача данных через контекст</strong> — это механизм, который
позволяет передавать данные напрямую через дерево компонентов без необходимости
передавать пропсы на каждом уровне.

#### Основные шаги&#58;

{/* prettier-ignore */}
1. <strong>Создание контекста</strong>&#58;

    - Создайте контекст с помощью <code>React&#46;createContext</code>.

    ```javascript
    const MyContext = React.createContext();
    ```

1. <strong>Использование Provider</strong>&#58;

    - Оберните дерево компонентов в <code>MyContext&#46;Provider</code> и передайте значение контекста.

    ```jsx
    <MyContext.Provider value={/* значение */}>
      {/* дочерние компоненты */}
    </MyContext.Provider>
    ```

1. <strong>Использование Consumer или useContext</strong>&#58;

    - Компоненты, которые должны получать данные из контекста, используют <code>MyContext&#46;Consumer</code> или хук <code>useContext</code>.

    ```javascript
    const value = useContext(MyContext);
    ```

#### Пример&#58;

```jsx
import React, { createContext, useContext } from "react";

// Создание контекста
const MyContext = createContext();

// Компонент Provider
const MyProvider = ({ children }) => {
  const value = "Hello, World!";
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
};

// Компонент Consumer с хуком useContext
const MyComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

// Основное приложение
const App = () => (
  <MyProvider>
    <MyComponent />
  </MyProvider>
);

export default App;
```

Передача данных через контекст позволяет эффективно передавать данные через дерево компонентов, избегая необходимости пропс-дриллинга (передачи пропсов на каждом уровне).

:::note[Ссылки для изучения]

1. [Контекст в React](https://reactdev.ru/archive/react16/context/)
   :::