Context provider что это за программа

Перевод статьи
Контекст React предоставляет данные компонентам независимо от того, насколько глубоко они находятся в дереве компонентов.

2661 просмотров

В этом посте вы узнаете, как использовать концепцию контекста в React.

1. Как использовать контекст
2. Когда он вам пригодится?
3. Пример использования (имя пользователя)
4. Контекст на помощь
5. Когда контекст меняется
6. Обновление контекста
7. Вывод

1 Как использовать контекст

Для использования контекста в React требуется 3 простых шага: создание контекста(A), предоставление контекста(Б) и использование контекста(В).

A.Создадим контекст
Встроенная фабричная функция createContext (по умолчанию) создает экземпляр контекста

Заводская функция принимает один необязательный аргумент: ‘Любое значение’

Б. Предоставление контекста

Компонент Context.Provider — доступный в экземпляре контекста, используется для предоставления контекста его дочерним компонентам, независимо от их глубины.

React JS #15 Контекст (React Context)

Чтобы установить значение контекста, используйте свойство value, доступное в />

Опять же, здесь важно то, что все компоненты, которые позже захотят использовать контекст, должны быть заключены в компонент провайдера.

В. Использование контекста

Использование контекста может быть выполнено двумя способами. Первый способ — это использовать хук useContext (Context)

Хук возвращает значение контекста: value = useContext (Context)

Хук также гарантирует повторный рендеринг компонента при изменении значения контекста

Второй способ — использовать функцию рендеринга, предоставленную в качестве дочернего для специального компонента Context.Consumer, доступного в экземпляре контекста:

Опять же, в случае, если значение контекста изменится — повторно отрендерит свою функцию рендеринга.

Вы можете иметь столько дочерних компонентов, сколько хотите для одного контекста. Если значение контекста изменяется (путем изменения свойства value провайдера (), то все дочерние компоненты немедленно уведомляются и повторно обрабатываются. Если дочерний компонент не заключен внутри провайдера, но все же пытается получить доступ к значению контекста (используя useContext (Context) или) , то значение контекста будет аргументом значения по умолчанию, предоставленным createContext (defaultValue) фабричная функция, создавшая контекст.

2 Когда он вам пригодится?

Основная идея использования контекста — предоставить вашим компонентам доступ к некоторым глобальным данным и повторный рендеринг при изменении этих глобальных данных. Контекст решает проблему сверления реквизита: когда вам нужно передать реквизиты от родителей детям.

Вы можете держать внутри контекста:

• Глобальное состояние приложения
• Тема приложения
• Конфигурация приложения
• Аутентификация пользователя
• Пользовательские настройки
• Предпочтительный язык
• Набор услуг

С другой стороны, вы должны хорошо подумать, прежде чем принимать решение об использовании контекста в своем приложении.

Android — Что такое Context

• Во-первых, интеграция контекста добавляет сложности. Создание контекста, обертывание всего в провайдере, использование useContext () в каждом дочернем компоненте — это увеличивает сложность.
• Во-вторых, добавление контекста затрудняет модульное тестирование компонентов. Во время модульного тестирования вам придется заключить потребительские компоненты в поставщик контекста. Включая компоненты, на которые косвенно влияет контекст — родителей дочерних компонентов контекста!

3 Пример использования (имя пользователя)

Самый простой способ передать данные от родителя к дочернему компоненту — это когда родитель назначает реквизиты своему дочернему компоненту

т.к. пишу на TS — Props обьявил ранее и назначил тип имени — строкой

Родительский компонент назначает данные userName своему дочернему компоненту с помощью свойства userName.

Это обычный способ передачи данных с использованием реквизита. Вы можете использовать этот подход без проблем. Ситуация меняется, когда дочерний компонент не является прямым потомком , но содержится в нескольких предках. Например, предположим, что компонент (тот, у которого есть глобальные данные userName) отображает компонент , который, в свою очередь, отображает компонент

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

Посмотрим как это будет выглядеть

Вы можете видеть проблему: поскольку компонент отображается глубоко в дереве, и все родительские компоненты ( и

) должны передавать свойство userName.

Эта проблема также известна как Буровая установка.

Контекст React — возможное решение. Давайте посмотрим, как его применить в следующем разделе.

4 Контекст на помощь

Напоминаем, что для применения контекста React требуются 3 участника: контекст, провайдер, извлеченный из контекста, и дочерний компонент.

Вот как будет выглядеть пример приложения при применении к нему контекста

Во-первых, const UserContext = createContext (‘Unknown’) создает контекст, в котором будет храниться информация об имени пользователя.

Во-вторых, внутри компонента дочерние компоненты приложения заключены в контекст пользователя: . Обратите внимание, что свойство value компонента поставщика важно: именно так вы устанавливаете значение контекста.

Наконец, становится потребителем контекста с помощью встроенной ловушки useContext (UserContext). Хук вызывается с контекстом в качестве аргумента и возвращает значение имени пользователя.

Промежуточные компоненты и

не должны передавать свойство userName. В этом большое преимущество контекста — он снимает бремя передачи данных через промежуточные компоненты.

5 Когда контекст меняется

Когда значение контекста изменяется путем изменения свойства значения поставщика контекста (), тогда все его потребители уведомляются и повторно обрабатываются. Например, если я изменю имя пользователя с «Дэн Абрамов» на «Дэн, Дэн Абрамов», то потребитель немедленно выполнит повторный рендеринг, чтобы отобразить последнее значение контекста

6 Обновление контекста

React Context API по умолчанию не имеет состояния и не предоставляет специальный метод для обновления значения контекста из компонентов-потребителей.

Но это можно легко реализовать, интегрировав механизм управления состоянием (например, хуки useState () или useReducer ()) и предоставив функцию обновления прямо в контексте рядом с самим значением. В следующем примере компонент использует ловушку useState () для управления значением контекста.

потребитель считывает значение контекста, из которого извлекаются userName и setUserName. Затем потребитель может обновить значение контекста, вызвав функцию обновления setUserName (newContextValue)

— еще один потребитель контекста. Когда обновляет контекст, этот компонент также обновляется.

Обратите внимание, что запоминает значение контекста. Мемоизация сохраняет объект значения контекста одним и тем же до тех пор, пока userName остается неизменным, предотвращая повторную визуализацию потребителей каждый раз, когда повторно отображается . В противном случае, без мемоизации, const value = создаст разные экземпляры объекта во время повторного рендеринга , инициируя повторный рендеринг в потребителях контекста.

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

Для использования контекста требуется 3 шага: создание, предоставление и использование контекста. При интеграции контекста в ваше приложение учтите, что он значительно усложняет его. Иногда «прокинуть» пропсы через 2-3 уровня иерархии не составляет большой проблемы.

Источник: vc.ru

Полное руководство по React Context

Представленные советы будут полезны даже тем, кто еще никогда не работал с React. Возможности Context изучим на простых, пошаговых примерах.

Что такое React Context?

React Context позволяет без использования props’ов передавать и применять (потреблять) данные в любом компоненте приложения.

Другими словами, React Context упрощает обмен данными (состоянием) между компонентами приложений.

Когда нужен React Context?

React Context эффективен при передаче данных, используемых в любом компоненте приложения.

Возможные типы данных:

· Данные темы (например, темный или светлый режим);

· Пользовательские данные прошедшего аутентификацию пользователя;

· Зависящие от местоположения данные (например, язык или регион пользователя).

В React Context следует размещать данные, не требующие частого обновления.

Причина в том, что Context предназначен лишь для упрощения процесса использования данных. Он не является целостной системой управления состоянием.

Сontext можно рассматривать как эквивалент глобальных переменных для компонентов React.

Какие проблемы решает React Context?

React Context помогает отказаться от “пробрасывания” props’ов (props drilling).

Термин Props drilling означает передачу props’ов во вложенный компонент через другие компоненты, расположенные ниже родительского и сами в данный момент не нуждающиеся этих пропсах.

Рассмотрим пример props drilling. В этом приложении есть доступ к данным темы, которые мы хотим передать как prop всем компонентам приложения.

При этом прямые дочерние элементы App , такие как Header , также должны передавать с помощью props’ов вниз по иерархии данные темы (theme data).

export default function App(< theme >) return (
<>
/>
/>
/>
/>

);
>function Header(< theme >) return (
<>
/>
/>
/>

);
>

В чем здесь проблема?

В том, что theme пробрасывается через несколько компонентов, в которых этот prop в данный момент вовсе не нужен.

В Header данные theme нужны лишь для того, чтобы передать их вниз дочернему компоненту. То есть, для User , Login и Menu было бы лучше напрямую получать данные theme .

Отказаться от пробрасывания пропсов позволяет React Context.

Как использовать React Context?

Context — это API, встроенное в React с версии 16.

Поэтому создавать и использовать Context можно посредством импорта React в созданные на его основе проекты.

4 шага использования React Context:

1. Создать Context, используя метод createContext .

2. Использовать поставщика созданного Context (context provider) в качестве оболочки дерева компонентов.

3. Поместить любое необходимое значение в context provider, используя prop value .

4. Прочесть это значение в любом компоненте с помощью context consumer.

Звучит несколько запутанно? Но здесь нет ничего сложного.

Вот простой пример. В рассмотренном ранее App передадим с помощью Context имя Reed и прочитаем его во вложенном компоненте User .

import React from ‘react’;export const UserContext = React.createContext();export default function App() return (

)
>function User() return (

>

)
>

Разберем этот код по шагам.

1. В компоненте App создаем Context с помощью React.create Context () и помещаем результат в переменную UserContext . Его практически всегда можно экспортировать (как сделано здесь), потому что ваш компонент будет в другом файле. Обратим внимание, при вызове React.createContext() можно передать начальное значение в prop value .

2. В компоненте App используем User Context . В данном случае User Context.Provider . Созданный Context — объект с двумя свойствами: Provider и Consumer . Они являются компонентами. Чтобы передать value вниз каждому компоненту App, используем в качестве оболочки компонент поставщика (в данном случае User ).

3. В UserContext.Provider помещаем значение, которое хотим передать вниз по иерархии компонентов. Для этого устанавливаем его равным prop value . В данном случае это имя Reed.

4. Используем потребительский компонент в UserContext.ConsumerUser и везде, где хотим потреблять (использовать) представленные в контексте данные. Для использования переданного вниз значения применяем render props pattern. Это просто функция, которую потребительский компонент (consumer component) предоставляет нам в качестве prop. Данная функция возвращает используемое в дальнейшем value .

Что такое хук useContext?

В приведенном выше примере не очень понятным может быть шаблон рендеринга props’ов для потребления контекста.

В React версии 16.8 для этого есть другой способ с применением хуков (с помощью useContext hook).

Вместо использования render props можно передать весь объект-контекст в React.useContext() для потребления в верхней части компонента.

Пример использования хука useContext hook:

import React from ‘react’;export const UserContext = React.createContext();export default function App() return (

)
>function User() const value = React.useContext(UserContext);

return ;
>

Преимущество хука useContext в том, что он делает компоненты более компактными и позволяет создавать пользовательские хуки.

В зависимости от предпочитаемого шаблона (паттерна) можно использовать напрямую потребительский компонент или хук useContext.

Всегда ли нужен Context?

Ошибкой многих разработчиков является обращение к Context , когда им нужно передавать props’ы на несколько уровней вниз к компоненту.

Вот приложение с вложенным компонентом Avatar , которому требуется два реквизита username и avatarSrc из компонента App .

export default function App(< user >) const < username, avatarSrc >= user; return (

avatarSrc= />

);
>function Navbar(< username, avatarSrc >) return (

avatarSrc= />

);
>function Avatar(< username, avatarSrc >) return ;
>

Нужно по возможности избегать передачи нескольких props’ов через компоненты, которым они не требуются.

Как это сделать?

Вначале следует упорядочить компоненты вместо того, чтобы сразу обращаться к контексту для передачи props’ов.

Поскольку только самый верхний компонент App должен знать о компоненте Avatar , мы можем создать его непосредственно в App .

Это позволяет передавать один prop avatar вместо двух.

export default function App(< user >) const < username, avatarSrc >= user; const avatar = alt= />; return (

/>

);
>function Navbar(< avatar >) return ;
>

Короче говоря, не следует сразу обращаться к Context. Нужно посмотреть, нельзя ли лучше организовать свои компоненты без props’ов.

Может ли React Context заменить Redux?

Нельзя ответить однозначно.

Redux — более простой способ передачи данных для изучающих React. Потому что в Redux имеется React Context.

Однако, если состояние не обновлять, а просто передавать по дереву компонентов, то и не нужен Redux (универсальная библиотека управления состоянием).

Ограничения применимости React Context

Почему невозможно обновить значение, которое передается вниз с помощью React Сontext?

Комбинируя React Сontext с хуком useReducer можно создать импровизированную библиотеку управления состоянием без использования сторонней библиотеки. Но из соображений потери производительности практикуется это редко.

Проблема здесь в том, что React Context запускает повторный рендеринг.

Что произойдет, если передавать объект провайдеру React Context и обновлять в нем какое-либо свойство? В любом использующем этот контекст компоненте будет выполнен повторный рендеринг.

Подобные проблемы с производительностью не всегда возникают в небольших приложениях с несколькими не очень часто обновляемыми значениями состояния (например, данные темы). Но все меняется в приложении с множеством компонентов в иерархии, если часто обновлять состояния.

• Как предотвратить состояние гонки с помощью React Context API
• Современное приложение выбирает… Redux, Context или Recoil?
• Лучший способ для привязки обработчиков событий в React

Источник: medium.com