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

Примітка

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

Синтаксис:

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

context.js

js
Скопіювати код
Expand

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

App.jsx

jsx
Скопіювати код
Expand

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

App.jsx

jsx
Скопіювати код
Expand

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

ChildCompOne.jsx

jsx
Скопіювати код
Expand

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

Примітка

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