Контекст у React — це потужна функція, яка дозволяє обмінюватися даними між компонентами без необхідності явної передачі пропсів на кожному рівні дерева компонентів. Використовуючи Контекст, можна передавати дані вниз по ієрархії компонентів, роблячи їх легко доступними для будь-якого компонента, незалежно від його розташування у дереві.

Примітка

Для початку розглянемо синтаксис. Ми надамо покрокову інструкцію, щоб забезпечити розуміння кожної концепції. Використання контексту вимагає конкретної реалізації коду на різних рівнях компонентів. Після детального розгляду синтаксису перейдемо до практичного прикладу.

Синтаксис:

Крок 1: Створюємо новий Контекст за допомогою функції createContext() з бібліотеки React і присвоюємо його змінній. Це слід робити на верхньому рівні застосунку. Зазвичай це реалізується в окремому файлі (наприклад, context.js). Він відповідатиме за об'єкт Контексту.

context.js

import { createContext } from "react";

// Create a new React context using the `createContext` function.
const Context = createContext();

// Export the created context so that it can be used in other parts of the application.
export default Context;

Крок 2: У файлі App необхідно обгорнути всі компоненти, яким потрібен доступ до спільних даних, у компонент Provider зі створеного Context. Компонент Provider дозволяє визначити значення контексту та зробити його доступним для всіх дочірніх компонентів, які споживають цей контекст.

App.jsx

import React from "react";

// Import the `Context` object from `../context`.
import Context from "../context";

// Import child components that need access to the shared data.
import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  return (
    // Wrap the child components with `Context.Provider`.
    <Context.Provider>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

Крок 3: У файлі App також необхідно надати дані контексту. Це досягається за допомогою пропса value для компонента Context.Provider. Усі необхідні дані призначаються пропсу value.

App.jsx

import React from "react";

import Context from "../context";

import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  // Define any data that you want to share across child components.
  const sharedData = "Some shared data";

  return (
    // Provide the shared data as a value to `Context.Provider`.
    <Context.Provider value={sharedData}>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

Крок 4: У дочірніх компонентах (ChildCompOne або ChildCompTwo) можна отримати доступ до спільних даних за допомогою хука useContext. Для використання хука useContext необхідно передати створений Context з файлу context.js як аргумент.

ChildCompOne.jsx

import React, { useContext } from "react";

// Import the `Context` object from "../context"
import Context from "../context";

const ChildComponentOne = () => {
  // Use the `useContext` hook to access data from the `Context`
  const data = useContext(Context);

  // You can now use the shared data in this component

  return <div>{data} in the first component</div>;
};

export default ChildComponentOne;

Повний код застосунку:

Примітка

Будь ласка, приділіть час для перегляду кожного кроку, відкриваючи кожен файл і папку, щоб чітко зрозуміти процес. У наступному розділі буде наведено приклад, що поєднує Context і хуки. Це дозволить вам побачити, як ці концепції працюють разом на практиці.