Контекст в React | OTUS
⚡Подписка от OTUS!
Собери свой пул курсов на выгодных условиях. Подробности в чате →
Написать в чат

Курсы

Программирование
Unity Game Developer. Basic
-15%
Разработчик программных роботов (RPA) на базе UiPath и PIX
-6%
Разработчик C#
-8%
Алгоритмы и структуры данных
-8%
Backend-разработчик на PHP
-8%
JavaScript Developer. Professional
-9%
iOS Developer. Professional
-8%
Базы данных
-12%
C# ASP.NET Core разработчик
-6%
Python Developer. Basic
-10%
Java Developer. Professional Web-разработчик на Python Android Developer. Basic PostgreSQL Software Architect Reverse-Engineering. Professional Kotlin Backend Developer React.js Developer VOIP инженер Нереляционные базы данных Scala-разработчик Супер-практикум по использованию и настройке GIT IoT-разработчик JavaScript Developer. Basic Advanced Fullstack JavaScript developer Unity Game Developer. Professional Супер-интенсив Azure
Инфраструктура
Супер-интенсив "Версионирование и командная работа с помощью Git"
-30%
Administrator Linux. Professional
-5%
Супер-интенсив «CI/CD или Непрерывная поставка с Docker и Kubernetes»
-30%
Разработчик программных роботов (RPA) на базе UiPath и PIX
-6%
Administrator Linux. Advanced
-8%
Infrastructure as a code in Ansible
-12%
Network engineer
-4%
MS SQL Server Developer
-8%
Cloud Solution Architecture Highload Architect Разработчик голосовых ассистентов и чат-ботов Мониторинг и логирование: Zabbix, Prometheus, ELK Супер-практикум по работе с протоколом BGP Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Архитектор сетей Супер-интенсив «IaC Ansible»
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

Контекст в React

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

Применение контекста

В первую очередь, следует создать объект контекста:

Screenshot_1-1801-d30848.png

Если посмотреть React-документацию, то мы увидим, что установка контекста в компоненте выглядит следующим образом:

Screenshot_2-1801-3f8b74.png

Но, к сожалению, в CodePen (React 16.4.2) это не сработало. Однако можно воспользоваться компонентами высшего порядка (КВП), что позволит задействовать контекст так, как рекомендует Dan Abramov:

Screenshot_3-1801-df5049.png

Тут мы оборачиваем компонент в компонент Context.Consumer, передавая в контекст в виде свойства.

Что же, далее можно написать следующее:

Screenshot_4-1801-9c9d21.png

При этом мы получим доступ к foo из объекта контекста в свойствах.

Но как же поменять контекст? Это уже сложнее, но у нас есть возможность ещё раз задействовать компоненты высшего порядка, получив что-то вроде:

Screenshot_5-1801-a8440b.png

В первую очередь мы возьмем исходное состояние контекста — это объект, который передан в React.createContext(). Его можно задействовать в качестве состояния компонента-обёртки. Далее определим все методы, которые пригодятся для смены состояния. В конце концов, обернем компонент в компонент Context.Provider. То есть мы осуществляем передачу состояния и функции в свойство value. Следовательно, они появятся в контексте у всех наследников, которые обернуты в компонент Context.Consumer.

Далее соберем всё воедино (компоненты высшего порядка для краткости опустим):

Screenshot_6-1801-0c0a87.png

В результате дочерний компонент получает доступ к глобальному контексту, и у него есть возможность менять значение атрибута foo на baz.

Весь код по теме контекста смотрите здесь.

Первоисточник

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться