Как развить свои операционные сверхдержавы с контекстом API

Автор оригинала: FreeCodeCamp Community Member.

Всем привет! ❤️.

На этот раз я собираюсь показать, как использовать API контекста в React.

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

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

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

Когда мы хотим абстрактно немного больше, мы можем использовать Redux Для абстрактных государств или реквизит к «внешнему» магазину, единый источник правды – если вы еще не читали мою статью о Как заставить мяч прокатиться с Redux через десять минут Не стесняйтесь делать это!

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

Представьте себе текущую аутентифицированную информацию о пользователе , Темы , Локаль️ о R Даже язык r ELA Тед данные.

Это информация, которая считается «глобальной» в дереве реактивных компонентов. После того, как вы измените эту информацию, все приложение должно повторно рендерировать, чтобы получить актуальную с ним.

Контекст предназначен для обмена данными, которые можно рассматривать “Глобальный”.

Итак, чтобы понять это, давайте грязным нашим руками! Если вы хотите, вы можете потянуть мой Github Repo здесь И играть немного с этими вещами, которые мы собираемся сделать:

01. Грязные руки

Давайте построим приложение, которое имеет приборную панель.

Внутри приборной панели есть виджет, который отображает тематическую кнопку.

Тематическая кнопка позволяет пользователю поменять тему приложения.

Что-то вроде этого:

Итак, начнем с нашего компонента приложения:

Этот компонент имеет состояние, поменять тему метод и рендер, который делает Компонент.

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

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

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

Кнопка также позволяет пользователю переключать тему из красного на синий и наоборот. Вот почему у него есть по щелчку обработчик, который вызывает поменять тему Метод прошел сверху вниз с компонента приложений -> Приборная панель -> Виджет -> кнопка.

Как вы видите все, это много реквизитов, много сложности, много повторного кода, многое?

Итак, в этот момент вы спрашиваете, как мы можем избежать этого? Как мы можем абстрактны все эти темы и сделать наш код очистителем?

Ответ за это использует контекст API, предоставляемый React !!

02. Реализация API контекста

Хорошо, первые вещи первыми.

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

Для этого мы начали, создавая Themecontext. с использованием Ract.createContext () .

Тогда мы создали компонент состояния Темапровидер который будет справиться с государством, поменять тему метод, который специфичен для этой тематической заботы.

В методе Render мы вернем с стоимость реквизиты, которые самостоятельно содержат все, что мы хотим распространять. Этот компонент будет принимать {this.proops.children}, используя рисунок рендеринга реквизита.

Таким образом, мы можем ввести во все, что охватывает реквизит ценности с нашим методом штата и ChangeMeMe.

Хорошо, следующий шаг – убирать все реквизиты? Мы прошли в нашем сопуске родителя к потоку детей и, очень важно, чтобы обернуть возвращение нашего компонента приложений в нашем компоненте – это даст «контекст» нашему приложению?

Это так намного чище, все! ❤️ Я так доволен этим! ?

Давайте сосредоточимся на нашем компоненте кнопки:

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

Для тех из вас, кто не знает, что это <> нотация такая же, как делать ; .

03. Заключение

У меня было так весело с этим, все! Мы смогли инкапсулировать все тематическую логику внутри правильного компонента, называемого .

Мы ввели контекст, где нам это нужно. В этом случае он был в компоненте , но он может быть сделан в любом месте выше места, которое мы хотим потреблять данные.

В конце концов, мы потребляли данные по необходимой точке. В этом случае он был в компоненте кнопки.

Мы убрали наше приложение от всего потока реквизит сверху вниз.

Это выигрыш, мои друзья! ?

Большое спасибо, и всегда помню, чтобы «Будь сильным и код!» ?

04. Библиография

01. Реагистрационная документация

проживает, январь 2011 года