Что такое контекст в React?

Реквизит против контекста

Привет, мир!

При разработке приложения нам может понадобиться передавать данные из одного компонента в другой. Иногда сценарий может быть немного сложным, когда нам нужно передать данные от n-го дочернего элемента компонента X до m-го дочернего элемента компонента Y.

Использование «Реквизита» — один из способов сделать это. Однако это вложенный компонент, поэтому нам придется связать несколько реквизитов, пока мы не достигнем желаемого компонента.

Давайте посмотрим пример:

На приведенной выше диаграмме давайте рассмотрим, хотим ли мы передать значение переменной val из компонента X в компонент c , который является третьим дочерним элементом компонента Y. Если мы передаем через пропсы, то это будет так: мы будем передавать val от X до Y, затем от Y до a, затем от a до b и, наконец, от b до c. Это такая длинная цепочка реквизитов от X до c. Но что, если у нас есть 100 дочерних элементов для компонента Y, и мы должны передать значение 100-му компоненту из Y. Мы не можем написать 100 реквизитов в цепочке. Для этого сценария мы можем использовать API реакции Context.

Контекст — это встроенный API в React, представленный в версии 16.3. Контекст позволяет нам передавать значение от одного компонента к другому напрямую, минуя дерево компонентов. Контекст хранит значения отдельно, поэтому данные доступны во всем приложении.

Вот как Контекст будет работать логически:

Как это реализовать?

Создать контекст очень просто. Мы можем создать такой контекст:

import { createContext } from "react";
export const NameOfContext = createContext('initial value')

Нам нужно будет заключить App.js в тег <NameofContext.provider> и предоставить значение контекста и функцию для изменения значения контекста в качестве поддержки значения. Мы делаем это в App.js, чтобы значение контекста было доступно во всем приложении, то есть во всех дочерних элементах компонента App. Ниже будет его реализация.

import {NameOfContext} from './path/to/context'
export default function App() {
    return (
        // Here the "val" is the context value and "setVal" is the function used to change the context value
        <ThemeContext.Provider value={{val, setVal}}>
            <div className="main-container">
                .
                .
                .
                .
            </div>
        </ThemeContext.Provider>

Если мы хотим установить контекст, мы можем сделать это, используя хук useContext. Ниже будет его реализация.

import {NameOfContext} from './path/to/context'

const Component = () => {
    // destructing the value and function with useContext hook
    const {val, setVal} = useContext(NameOfContext)
    return (
        <div>
            <!-- Assuming the val is 0 and on clicking the button, we are incrementing by 1 -->
            <button onClick={() => setVal(val+1)}>{val}</button>
        </div>
    )
}

export default Component

Вариант использования

Я использовал Context в одном из вариантов использования на своем веб-сайте. Я реализовал темную тему для своего веб-сайта, где тема должна переключаться между темной и светлой при нажатии кнопки.

Для реализации этого я создал ThemeContext, в котором хранится значение темы, будь то 'dark' или 'light'. Я буду устанавливать значение контекста в компоненте, который содержит кнопку-переключатель. Для остальных компонентов я получу значение контекста и применю классы CSS на основе значения контекста.

Ниже приведены несколько реализаций на моем сайте:

Я создал файл ThemeContext.js, в котором я создал и инициализировал контекст с помощью 'light'.

В файле App.js я заключил вещи внутри тега <ThemeContext.Provider>.

В файле header.jsx, который содержит кнопку-переключатель, я использую theme для установки стилей тем и setTheme для обновления контекста при нажатии кнопки.

В файле footer.jsx я просто использую значение theme для установки классов CSS в соответствии с темой.

Как и для компонента нижнего колонтитула, для остальных компонентов я использовал значение theme и соответствующим образом установил классы CSS.

Вы можете посмотреть, как я это реализовал в репозитории ниже:

Вот как это работает на реальном сайте:

За и против

Плюсы

Ниже приведены несколько преимуществ контекстов:

• Избегает длинных цепочек реквизита
• Просто и легко реализовать

Минусы

Контекст — замечательная функция, облегчающая нашу работу. Но у него также есть некоторые минусы, и ниже приведены некоторые из них:

• Отладка затруднена.
• Может создать ненужную сложность при чрезмерном использовании

Это все о контекстах React. Надеюсь, это полезно. Ждем ваших комментариев и отзывов. Спасибо!

Первоначально опубликовано на https://sriram23.hashnode.dev.