В React хук useContext произвел революцию в способе передачи данных через дерево компонентов, устранив необходимость в ручном сверлении пропеллеров. Представленный в React 16.8, этот мощный хук упростил поток данных и улучшил опыт разработчиков.
До хука useContext разработчикам приходилось вручную передавать пропсы вниз по иерархии компонентов — процесс, известный как просверливание пропсов. Такой подход не только увеличил сложность кода, но и усложнил поддержку и обновление приложения. С введением хука useContext это разочарование было решено.
Используя хук useContext, компонент может использовать значение, предоставленное контекстом, и автоматически подписываться на обновления всякий раз, когда значение контекста изменяется. Хук принимает объект контекста, созданный с использованием createContext, в качестве аргумента и возвращает текущее значение, связанное с этим контекстом. Этот хук должен быть импортирован в файл jsx так же, как и другие хуки:
Этот блог прольет свет на то, как инициализировать useContext в нашем приложении для реагирования, и поймет, как его использовать.
Визуализация использования хука useContext
Мы собираемся вернуться к этой диаграмме, чтобы лучше понять концепцию:
В иерархии компонентов React рассмотрим сценарий, в котором КОМПОНЕНТу 17 требуются данные из КОМПОНЕНТА 2.
Традиционно инстинктивный подход включает в себя извлечение данных из компонента APP верхнего уровня и передачу их вниз через несколько уровней компонентов с использованием свойств. Этот процесс может быть утомительным и занимать много времени, особенно по мере роста иерархии.
Как useContext может помочь использовать out?
Давайте разберемся шаг за шагом, как инициализировать useContext в нашем редакторе кода.
Чтобы начать настройку нашего приложения React в любом редакторе кода, таком как VS Code, давайте создадим новую папку с именем «context» внутри папки «src». В папке context мы создадим два файла JavaScript: noteContext.js и NoteState.js. Эти файлы предназначены для управления состоянием наших заметок с использованием контекста.
В noteContext.js мы создадим наш контекст, используя функцию createContext, предоставляемую React. Этот контекст будет служить мостом для обмена состоянием между родительским и дочерним компонентами. Обернув наши компоненты этим контекстом, мы можем получить доступ и обновить общее состояние внутри этих компонентов.
// src/context/noteContext.js
import { createContext } from 'react';
const NoteContext = createContext();
export default NoteContext;
В NoteState.js мы определим компонент NoteState, который будет хранить состояние наших заметок. Этот компонент будет обрабатывать логику управления состоянием, например добавление, удаление или обновление заметок. Он также предоставит необходимые значения контекста для совместного использования с другими компонентами.
// src/context/NoteState.js
import React from 'react';
import NoteContext from './noteContext';
const NoteState = (props) => {
const state = {
"name": "Rahul",
"age": "x"
};
return (
<NoteContext.Provider value={state}>
{props.children}
</NoteContext.Provider>
);
};
export default NoteState;
Давайте шаг за шагом визуализируем использование вышеуказанных двух файлов.
- В noteContext.js мы используем Context API, предоставляемый React. Мы создаем контекст, вызывая функцию createContext и назначая ее переменной NoteContext. Этот контекст будет действовать как контейнер для наших общих данных.
- Затем мы импортируем переменную NoteContext в NoteState.js, чтобы сделать ее доступной в этом файле. В NoteState.js мы определяем функциональный компонент с именем NoteState. Внутри этого компонента мы создаем объект с именем state, в котором будут храниться данные, связанные с заметками.
- Чтобы поделиться этим объектом «состояния» с другими компонентами, мы обертываем наше дерево компонентов синтаксисом Provider, предоставляемым контекстом. Поставщик принимает реквизит value, куда мы передаем объект state в качестве значения. Это гарантирует, что все компоненты, которые импортируют NoteState.js в будущем, будут иметь доступ к этим общим данным.
Выполняя эти шаги, мы создаем механизм, делающий данные state доступными для всех компонентов, которым они требуются. Таким образом, мы можем легко импортировать NoteState.js в нужные нам компоненты и использовать общие данные.
Использование Context API таким образом позволяет нам избежать детализации реквизитов и обеспечивает чистый и эффективный способ обмена данными между компонентами в нашем приложении React.
Давайте представим, как мы можем использовать его в нашем приложении.
//src/components/App
import React from 'react';
import Component1 from './Component1';
import Component2 from './Component2';
import Component3 from './Component3';
import NoteState from './context/NoteState';
const App = () => {
return (
<div>
<h1>This is the App Component</h1>
<NoteState>
<Component1 />
<Component2 />
<Component3 />
</NoteState>
</div>
);
};
export default App;
Чтобы сделать данные доступными для родительских компонентов вместе с их дочерними компонентами, мы можем использовать компонент «NoteState» и контекст, созданный в «noteContext.js». Обернув всю иерархию «Компонент1», «Компонент2» и «Компонент3» внутри компонента «NoteState» внутри компонента «Приложение», мы можем устранить необходимость в детализации реквизита и обеспечить доступность данных для всех компонентов-потомков. .
Делая это, мы устанавливаем поставщика контекста и делаем общие данные доступными для «Component1», «Component2», «Component3» и всех их дочерних и внучатых компонентов.
Итак, теперь наша цель состояла в том, чтобы получить эти данные в КОМПОНЕНТЕ 17 без сверления пропеллеров. Давайте посмотрим, как мы можем этого достичь.
//components/src/COMPONENT17
import React, { useContext } from 'react';
import NoteContext from '../context/notes/noteContext';
const COMPONENT17 = () => {
const data = useContext(NoteContext);
console.log("My name is", data.name);
return (
<>
My name is {data.name}
</>
);
};
export default COMPONENT17;
COMPONENT17 console.log возвращает:
//Console Output --> My name is Rahul
Заключение
В заключение отметим, что хук useContext в React преобразовал поток данных в деревьях компонентов, устранив ручное сверление реквизитов. С помощью этого мощного хука, представленного в React 16.8, разработчики могут легко использовать значения контекста и подписываться на обновления по мере их появления. Создавая контекст с помощью createContext и используя хук useContext, компоненты могут получать доступ к общим данным без необходимости явной передачи свойств. Такой подход упрощает код, повышает удобство сопровождения и расширяет возможности разработчиков. В целом, хук useContext произвел революцию в разработке React, предоставив более чистый и эффективный способ совместного использования и использования данных между компонентами.
console.log("Coding for Life 🍻")
