Контекст

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

Примітка

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

Синтаксис:

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

context.js

js
Скопіювати код
Collapse
9
1
2
3
4
5
6
7
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

jsx
Скопіювати код
Collapse
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

jsx
Скопіювати код
Collapse
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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
    <Context.Provider value={sharedData}>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

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

ChildCompOne.jsx

jsx
Скопіювати код
Collapse
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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;

Повний код програми:

Примітка

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