Для разработчика React контекст в React — это довольно важный инструмент, который нужно знать. Контекст React — это простой способ предоставить любому компоненту, независимо от того, насколько глубоко он находится в дереве компонентов. Следовательно, это делает его весьма необходимым инструментом для разработчика React или для того, чтобы стать разработчиком React.
В этой статье мы подробно обсудим контекст React, узнаем, что это такое? как его использовать? Где его использовать, а где не реагировать на контекст и многое другое. Статья создана таким образом, что даже если вы никогда раньше не использовали контекст React, вы все равно сможете понять все в статье с помощью простых примеров.
Хватит болтать, пора начинать!
Что такое React Context?
Использование контекста React — это самый простой способ обмениваться данными и использовать их в любом компоненте в данном приложении React, независимо от того, насколько глубоко компонент находится в дереве компонентов, без необходимости использования каких-либо свойств.
Когда использовать контекст React?
Контекст React предоставляет пользователю простой способ передачи данных любому компоненту приложения.
Лучше всего использовать его, когда вы хотите, чтобы все компоненты имели доступ к глобальным данным и хотите легко изменять их все при изменении глобальных настроек или данных. Ярким примером могут служить данные темы, переключение между светлым и темным режимом становится довольно простым с контекстом React.
Аналогичным образом его можно использовать для данных, специфичных для местоположения, таких как язык пользователя или региональные настройки, или для данных пользователя (данных, специфичных для текущих аутентифицированных пользователей).
Когда не следует использовать контекст React?
Использование контекста в React для создания различных приложений React имеет довольно много преимуществ. Но вам следует хорошо подумать, прежде чем решить использовать контекст React для создания своего приложения. Поскольку у него есть и некоторые недостатки.
Усложнение кода (Complexity) – Использование контекста React в вашем приложении также увеличит сложность вашего приложения.
Усложнить тестирование – Интеграция контекста React позволит провести модульное тестирование для каждого компонента. Вам нужно будет обернуть компоненты-потребители в поставщика контекста React во время выполнения модульного тестирования.
Какую проблему решает использование контекста React?
Самая серьезная проблема, решенная с помощью контекста React, заключается в том, чтобы избежать проблемы сверления props. Теперь вы можете спросить, что такое сверление props? Термин сверление props используется для описания ситуации, когда вам нужно передать данные props во вложенный компонент через несколько родительских компонентов, которым эти props даже не нужны.
Как использовать контекст React?
Контекст React стал встроенным API в языке программирования React, начиная с версии 16.
Это просто означает, что если вы используете React версии 16 или выше, то вам не нужно устанавливать какой-либо новый API, и вы можете создавать и использовать контекст непосредственно в любом приложении React после импорта React.
Вы можете использовать любой из этих двух синтаксисов, чтобы начать использовать контекст React.
импортировать React из ‘react’;
или
импортировать { createContext } из ‘реакции’;
Процесс применения к контексту в React можно разделить на 3 простых шага:
1) Создайте контекст в React с помощью метода createContext.
2) Предоставьте контекст различным компонентам, взяв созданный контекст и обернув поставщик контекста вокруг вашего дерева компонентов. Вы можете назначить любое значение, которое вам нравится, поставщику контекста вокруг вашего дерева компонентов.
3) Начните потреблять (использовать) контекст, используя потребителя контекста для считывания значения значения в любом компоненте.
Давайте разберем все вышеизложенные пункты, рассмотрев простой пример, приведенный ниже в качестве примера:
импортировать React из ‘react’;
экспортировать const ExContext = React.createContext();
экспортировать функцию по умолчанию App() {
возвращаться (
<Пример />
)
}
Пример функции() {
возвращаться (
{значение =>
{значение}
}
{/* печатает: Рид */
)
}
Здесь, в коде, написанном выше, вы можете увидеть использование контекста React. Давайте разберем код выше и посмотрим, как он следует шагам, обсуждавшимся ранее.
1) Создание контекста –
импортировать React из ‘react’;
экспортировать const ExContext = React.createContext();
Над всеми компонентами приложения мы сначала импортировали React, а затем создали контекст React, используя его встроенную функцию createContext(); и поместив результат в переменную ExContext. В большинстве случаев ваш компонент будет находиться в другом файле, вам нужно будет сначала экспортировать его.
2) Предоставление контекста компоненту –
экспортировать функцию по умолчанию App()
{
возвращаться (
<Пример />
)
}
Компонент поставщика контекста может быть использован для его дочернего компонента, чтобы передать значение вниз к каждому компоненту в вашем приложении React, вам нужно обернуть наш компонент поставщика вокруг него. В коде выше это сделано для компонента «Example».
И чтобы поместить желаемое значение во все дерево компонентов, мы можем использовать для этого свойство «value». В коде выше оно установлено как «ExampleValue». Вы можете просто изменить значение context, настроив свойство Value.
3) Потребление или использование контекстных данных
Пример функции() {
возвращаться (
{значение =>
{значение}
}
{/* выводит: ExampleValue*/
)
Потребление содержимого React может быть осуществлено с помощью специального компонента .consumer, который доступен в экземпляре контекста.
В случае любого изменения значения контекста компонент потребителя также перерисует себя, чтобы учесть новые изменения. В каждом контексте у вас может быть столько потребителей, сколько вы захотите, и изменение значения в контексте немедленно изменит всех потребителей.
Заключение
Надеюсь, эта статья поможет вам лучше понять, как использовать контекст React в вашем приложении React. Удачи в вашем проекте React, счастливого кодирования!!!