С возвращением, друзья!


Сегодня мы рассмотрим основы React Hook под названием useContext. useContext — это мощный инструмент, который выходит за рамки useState и создает глобальное состояние State, которое может передавать информацию дочерним и внуковым компонентам без прямой передачи реквизитов.

Но я забегаю вперед.
Если вы не знакомы с useState, сначала прочитайте мою предыдущую статью, а затем вернитесь и приготовьтесь удивиться!


Как использовать useState: https://dev.to/deborah/how-to-use-state-in-react-2pah

Теперь, когда вы разобрались с useState, давайте углубимся в useContext!

Что такое useContext?:

useContext идеально подходит для данных, которые необходимо разместить в глобальной области (например, имя пользователя, которое будет держать кого-то в системе на протяжении всего приложения), но это не универсальный ярлык для передача реквизита дочерним компонентам.
Однако useContext позволяет нам передавать данные без прямой передачи реквизитов и поэтому чрезвычайно полезен, когда мы сталкиваемся с данными, к которым необходимо получить доступ нескольким дочерним компонентам или которые должны быть доступны для всего приложения.

Чтобы запустить useContext, нам нужно сделать два шага: сначала нам нужно создать объект контекста («createContext»), затем нам нужно получить доступ к значению через провайдера с помощью перехватчика «useContext». .

Следующие примеры были упрощены, чтобы дать вам лучшее представление о том, что такое useContext и как его использовать, но вы должны знать, что createContext часто объявляется в отдельном файле. Однако я сравниваю Parent.js с типичным файлом App.js (компонентом, находящимся на вершине иерархии компонентов). Parent.js — это место, где я определил все свои переменные состояния, функции, которые обновляют эти переменные состояния, и выполнил выборку данных в базе данных с помощью useEffect. Я решил объявить createContext в своем компоненте верхнего уровня вместо создания собственного файла, чтобы упростить это объяснение и помочь вам лучше понять основные концепции контекста.

Учитывая все вышесказанное, давайте начнем с самого начала: createContext!

1. Первое, что нам нужно сделать, это объявить и экспортировать переменную с именем «Контекст», которую мы будем использовать позже в наших дочерних компонентах [сейчас мы создаем переменную, чтобы сделать наш код более простым и чтобы мы могли разместить значение (данные) внутри него, к которому можно будет получить доступ позже]:

export Context = React.createContext();

Контекст — это объект контекста, созданный вызовом createContext. Объект контекста содержит компонент под названием Provider, который мы теперь сможем вызывать, а затем передавать переменные и функции, которые мы хотим сохранить на нашем «глобальном» уровне.

2. Используя нашу переменную «Контекст», давайте теперь перейдем к нашему JSX в операторе возврата. Здесь мы назовем «Контекст» и обернем его открывающими тегами (угловыми скобками), а также вызовем Provider следующим образом:

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

Чтобы завершить «Context.Provider», нам также необходимо указать значение для «Provider». Здесь мы передадим объект со всеми переменными и функциями, которые мы будем вызывать с помощью «Контекста» в дочерних компонентах:

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

ОЧЕНЬ ВАЖНО отметить, что нам нужно поместить ВСЕ дочерние компоненты, которые будут использовать переменные и функции, между тегами. Например:

return(
    
);

Обратите внимание, что нам не нужно передавать какие-либо реквизиты непосредственно дочерним компонентам (как в случае с useState), если мы помещаем реквизиты внутри value.

Теперь, когда мы использовали createContext и передали все наши глобальные элементы в «Context.Provider», мы готовы перейти к дочерним компонентам и посмотреть, как использовать «Context».

3. Давайте перейдем к дочернему компоненту, который (в данном примере) находится в файле «Child.js». Как и в жизни с программированием: если хочешь что-то использовать, нужно это импортировать. Давайте продолжим и возьмем «Контекст» из того места, где мы его объявили в «Parent.js», чтобы мы могли использовать его в этом дочернем компоненте («Child.js»):

import Context from ‘./Parent.js’;

4. Теперь, когда у нас есть доступ к «Контексту» в дочернем компоненте, нам нужно импортировать «useContext» в файл, чтобы мы могли передать ему «Контекст» (подробнее об этом чуть позже):

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

5. Отлично! Теперь давайте воспользуемся «useContext». Сначала нам нужно объявить переменную, с которой будет использоваться useContext. Мы сделаем это внутри компонента аналогично тому, как мы объявляем useState:

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

function Child(){
    const { example, setExample } = useContext(Context)

    // The rest of our code

В этом коде мы используем фигурные скобки {} для обозначения назначения деструктуризации. Это необычный способ сказать, что мы можем вызывать несколько переменных и функций, хранящихся в контексте. Мы также передаем «Контекст» в «useContext», чтобы иметь доступ к значениям, определенным в Context.Provider (который мы объявили в «Parent.js»).



6. Хотите верьте, хотите нет, но все готово! Теперь вы можете использовать значения контекста в своем коде так же, как обычно используете State. Например:

const expId = example.id;

или

setExample(newExample);

Давайте подведем итоги:

Поздравляем! Теперь у вас есть все инструменты для начала работы с createContext и useContext. Вы понимаете, что useContext позволяет вам создать что-то вроде «глобального состояния», которое может передавать переменные и функции компонентам без передачи реквизитов напрямую через дочерние компоненты.

Мы также углубились в шесть шагов, необходимых для обеспечения работы контекста в ваших приложениях. Теперь вы готовы начать кодирование с помощью createContext и useContext, но если вам когда-нибудь понадобится краткое руководство, вот оно:

В родительском компоненте объявите и экспортируйте переменную с именем «Контекст», используя «createContext»:

export const Context = React.createContext();

В JSX родительского компонента оберните все дочерние компоненты, которым требуется доступ к контексту, в Context.Proivder и передайте любые переменные/функции внутри объекта:

   //Child components

В дочернем компоненте импортируйте useContext:

import React, { useContext } from ‘react’;

Также импортируйте «Контекст» из родительского компонента:

import Context from “./Parent.js’;

Затем используйте useContext и передайте ему переменную «Контекст»:

const { example, handleExample } = useContext(Context);

Наконец, используйте контекст, к которому у вас теперь есть доступ (в наших примерах выше это будут «example» и «handleExample»), однако вам нужно это сделать в дочернем компоненте.

Отличная работа! И до следующих встреч, удачного кодирования!

И последнее замечание: если вы хотите углубиться в эту тему, вот официальные ресурсы документации, на которые я также ссылался при изучении useContext и написании этого блога:

Официальная документация:
https://react.dev/reference/react/createContext

Официальная документация Legacy, которая по-прежнему полезна для понимания использования контекста: https://legacy.reactjs.org/docs/context.html