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

В этой статье мы рассмотрим, что такое Context API в React, его назначение и пример реализации.

Что такое Context API?

Context API используется для передачи глобальных переменных в любом месте кода без необходимости prop drilling (передачи props через множество промежуточных компонентов). Это особенно полезно, когда требуется разделить состояние между большим количеством вложенных компонентов. Context API лёгкий и простой в использовании. Для создания контекста достаточно вызвать React.createContext(). Нет необходимости устанавливать дополнительные зависимости или сторонние библиотеки, такие как Redux, для управления состоянием.

Зачем нужен Context API?

Context API решает проблему prop drilling в React. Prop drilling возникает, когда данные нужно передавать через несколько уровней компонентов, прежде чем они достигнут нужного. Это снижает производительность приложения. Context API создаёт глобальные переменные, доступные во всём приложении, без участия промежуточных компонентов. Кроме того, его проще применять, чем React Redux.

Принцип работы

Для работы с Context API используется React.createContext. Этот объект имеет два свойства: Provider и Consumer. Provider выполняет роль родителя, который передаёт состояние своим дочерним элементам, а Consumer — использует это состояние.

Преимущества Context API по сравнению с React Redux

1. В Redux для добавления даже одной новой функции приходится изменять несколько файлов, а в Context это можно сделать с помощью гораздо меньшего объёма кода.
2. Context поддерживает однонаправленную привязку данных (one way data binding), что типично для React, тогда как Redux её нарушает.
3. Можно создавать множество хранилищ/контекстов через Context API, тогда как Redux предусматривает наличие только одного глобального хранилища.

Шаги реализации Context API в React

Шаг 1: Создайте React-приложение с помощью команды:

npx create-react-app project

Шаг 2: Перейдите в созданную папку проекта:

cd project

Шаг 3: Создайте два новых файла:

• Context.js — для создания контекста
• WelcomePage.js — для компонента welcomePage

Структура проекта:

Она будет выглядеть следующим образом.

Подход

Мы будем использовать Context API, чтобы отображать имя пользователя и его ID.

1. Сначала создайте файл Context.js в папке src, где определите UserContext. Контекст содержит Provider и Consumer, которые сохранятся в соответствующих константах.
2. В простом компоненте отобразим сообщение с именем пользователя и ID, которые будут переданы через Provider.
3. В index.js обернём компонент App в Provider, передав имя и ID в качестве значений. Если значения не передать, страница останется пустой.

---

Пример

Запишите следующий код в соответствующие файлы:

1. Context.js: создаём Consumer и Provider

// Context.js
import React from 'react';

const UserContext = React.createContext();

export const Provider = UserContext.Provider;
export const Consumer = UserContext.Consumer;

2. WelcomePage.js: Consumer потребляет значения из контекста

// WelcomePage.js

import React from "react";
import { Consumer } from "./Context";

const WelcomePage = () => {
    return (
        

            
Welcome User :
            
                {(value) => (
                    

                        Name: {value.name} id: {value.id}{" "}
                    
                )}
                {/* эта функция принимает value как проп */}
            
        
    );
};

export default WelcomePage;

3. index.js: передаём Provider всему приложению

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from './Context';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

4. App.js: импортируем и отображаем компонент

// App.js

import WelcomePage from "./WelcomePage";

function App() {
  return (
    

       
    
  );
}

export default App;

---

Запуск приложения

Для запуска приложения из корневой папки проекта выполните команду:

npm start

---

Вывод:

При корректной настройке приложение отобразит приветственное сообщение с именем пользователя и его ID, переданными через Context API.

---

🔑 Ключевые моменты:

• Context API позволяет обмениваться данными между компонентами без необходимости передачи props на каждом уровне.
• Context API решает проблему prop drilling и упрощает управление глобальным состоянием.
• В сравнении с Redux, Context API требует меньшего объёма кода и проще в использовании.
• Provider передаёт данные, Consumer — потребляет их в компонентах.
• React-приложения с Context API можно запускать и развивать без дополнительных библиотек для состояния.