Если вы начинаете реагировать И вы использовали реквизиты для передачи данных из одного компонента к другому, эта статья для вас, чтобы помочь повысить вашу контекстную игру.
P.S – Эта статья в основном сосредоточена на абсолютных начинающих и вот почему я пытался объяснить вещи детально – это будет довольно долго. Также предполагается, что у вас есть основные знания о том, как работают реагированные крюки.
Зачем использовать контекст React?
Вы видите, что есть концепция, называемая «бурением» в реакции. В основном это означает передачу определенных данных из родительского компонента к другому через реквизиты. React Context является более легкой альтернативой этому способу. (Подробно объясняется позже)
Что такое реквизит?
Представьте себе своих родителей, увидите, что они должны иметь какие-то особые характеристики. Это может быть цвет глаз, цвет кожи, форма носа и т. Д. Аналогичным образом, в реакции каждый родительский компонент имеет характеристики (или позволяет называть его свойствами или даже лучшее слово – реквизиты) можно передавать детям в случае, если мы хотим внести изменения в дочерние компоненты на основе родительских компонентов.
Так что же со всей «опоры», мой друг?
Давайте понять это с помощью примера.
Шаг 1: Создайте родительский компонент. Теперь также обратите внимание, что мы создали некоторые стили, которые родителя хочет перейти к своему ребенку.
import React from "react";
style = {
color: "red"
}
function Parent() {
return (
Parent component
);
}
export default Parent;
Шаг 2: Создайте дочерний компонент.
import React from 'react'
function Child() {
return(
Child component
)
}
export default Child
Шаг 3: Теперь приходит важная часть – проходящие реквизиты. Прежде всего в своем родительском компонентам импортируйте дочерний компонент и оберните ребенка внутри родителя. Во-вторых, пройдите переменную «стиль» в качестве реквизита (названного стиля) к дочерним компоненте. Вот как вы можете сделать это:
//Parent.js
function Parent() {
return (
Parent component
+ Шаг 4: Теперь единственная левая часть прихватала эту пропущенную опору от стороны дочернего компонента и применяя стиль к дочерному элементу.
- Во-первых, используя Метод разрушимости Мы извлекаем «стиль» опоры от родителя. Теперь это доступно как переменная, которую мы можем использовать где угодно. например:
function Child({ style }) {
return Child component;
}
- Во-вторых, просто примените стиль до детского элемента, вот и у VOILA! Текст в вашем элементе в настоящее время красный.
Вот как будет выглядеть окончательный код как для родительских и дочерних компонентов:
Но название говорит, что мы собираемся построить мертвое простое приложение для кошелька? Где это ?
Таким образом, причина, по которой я объяснил метод предпринима, это широко связан с тем, что сначала мы не будем прыгать в создание кошелька, используя контекст React. Вместо этого мы пройдемся через какой-то базовый код модели того, как этот кошелек должен быть Использование реквизита А потом мы посмотрю на то, насколько легко кресться это использует Реагистрировать контекст Отказ
Давайте начнем >>>
Способ 1: Базовый код для кошелька – (с использованием реквизит)
Время историй : Есть 3 банка – Paytm, SBI и ось. Эти 3 банка они регулярно занимаются деньгами. Но единственная проблема в том, что если PAYTM (1-й банк) хочет отправить деньги на ось (3-й банк), PAYTM может сделать это только путем первой передачи денег на SBI, а затем SBI передаст деньги на ось. (Я знаю нормально, это не так, но в нашем примере мы полагаем это таким образом).
Таким образом, основным способом этих трех банков передает деньги через друг друга, является через «реквизит» – да, одинаковые реквизиты, которые мы объяснили выше.
Цель: Наша цель – перевести деньги от Paytm в Axis Bank, имея SBI в качестве средней группы, просто для передачи реквизитов и ничего другого. Вы можете подумать, что SBI как здесь больше моста/агента здесь.
Шаг 1: Создавайте 3 компонента, а именно – paytm.js, sbi.js, axis.js.
Шаг 2: Давайте сначала поговорим о Paytm.js. Ну вот:
import React, { useState } from "react";
import Sbi from "./Sbi";
function Paytm() {
const [amount, setAmount] = useState(200);
//send PaytmName money to Axis bank
return (
Paytm
);
}
export default Paytm;
Объяснение: Так что здесь создали компонент Paytm.js. Внутри есть годный крючок, который имеет значение «сумма по умолчанию» 200. Но не могли бы вы просто посмотреть на нашу цель: он говорит «Перевести эту сумму 200 до оси Банк, используя SBI как агента». Таким образом, мы передаем эту переменную состояния «сумма» к «сумме» (вы можете назвать вашу опору что-нибудь, что вы хотите, но ради простоты я называю его суммой).
Шаг 3: Время для SBI действовать как агент.
import React from "react";
import Axis from "./Axis";
function Sbi({amount}) {
return (
Sbi
);
}
export default Sbi;
Объяснение: Помните пример родительского ребенка, я объяснил сверху? И как я объяснил целое дело с «опорой», «разрушительными» и т. Д.? Вот то же самое, что мы делаем. Здесь SBI извлекает опоры, прошедший из PAYTM, а затем передает его как реквизиты его дочерним элементом (осью). Если вы не поняли эту часть, не волнуйтесь, просто пройдите через родитель-ребенок.
Шаг 4: Последняя и окончательная часть – создание нашей AXIS.JS.
import React from "react";
function Axis({amount}) {
return (
Axis received {amount} from Paytm through sbi by way of props
);
}
export default Axis;
Объяснение: Такие же концепции применяются – вы разрушаете значение от родителя Axis I.e SBI И тогда вы используете переменную внутри текста. Теперь, если вы кодируете со мной до сих пор, вы заметите, что стоимость суммы 200 успешно была передана из PAYTM -> Bank Axis. Вот как вы проходите ценность через реквизиты Миссия завершена Отказ
Посмотрите на код: https://codesandox.io/s/react-bank-exampleusing-props-xpxv6?file=/src/axis.js:0-192
Способ 2: Создание кошелька (с использованием контекста RACT)
Так что это в основном то, что мы будем строить, я знаю, что это не большая часть приложения кошелька Но здесь многое здесь.
Понимание реагированного контекста
«Контекст» на английском языке просто означает «любые данные/информацию, которые были установлены уже, которые могут помочь нам понять текущую ситуацию». В реакции создание контекста просто означает создание универсального магазина значений и захватывающих их всякий раз, когда нам нужно. Правило, которое реагирует на контекст, следуют: хранить один раз, используйте где угодно. Как это работает, это потому, что контекст React имеет два объекта – провайдер и потребитель. Поставщик, как следует из названия, – это место, где мы должны хранить данные, и потребитель – это тот, кто использует эти данные. Таким образом, в нашем примере, если PAYTM является провайдером, то SBI и ось являются потребителями. Но когда мы смотрим на нашу цель, то какой вы думаете, что наш потребитель должен быть? Оси Банк конечно!
Цель: Отправить деньги из Paytm -> Axis Bank Не передавая деньги через SBI Используя React Context.
Шаг 1: Начнем с создания Mycontext.js файл:
//MyContext.js import React from "react"; const MyContext = React.createContext(); export default MyContext;
Объяснение: В реакции объект контекста приходит предварительно загружен. Поэтому, если нам нужно использовать контекст, мы должны инициализировать контекст, создав объект React Context, используя CreateContext. А затем хранить это в переменной под названием «MyContext», затем экспортировать его.
Шаг 2: Создать провайдер контекста в Paytm.js
//Paytm.js
import React, { useState } from "react";
import Sbi from "./Sbi";
import Total from "./Total";
import Balance from "./Balance";
import MyContext from "./MyContext";
const style = {
background: "black",
color: "red",
padding: "0.5rem",
display: "grid",
gridTemplateColumns: "1fr 1fr"
};
function Paytm() {
const [amount, setAmount] = useState(200);
const [total, setTotal] = useState(500);
const [balance, setBalance] = useState(null);
//Goal: send Paytm money to Axis bank without the passing the money through Sbi
return (
Paytm
);
}
Объяснение:
- Во-первых, мы импортируем переменную MyContext из
Mycontext.jsОтказ Почему ? Так что мы можем создать провайдер. - Создайте объект провайдера с помощью MyContext, как показано выше. Одно важное замечание здесь, так это то, что вы должны обернуть дочерние компоненты внутри провайдера, чтобы каждый ребенок получил доступ к данным из центрального магазина поставщика. E.g Поскольку ось является ребенком SBI, мы должны обернуть SBI вокруг поставщика Paytm.
- Далее мы создаем некоторые гостевые крючки с некоторыми значениями по умолчанию, которые мы пройдем как «реквизит» для провайдера. Это «реквизит», которое мы проходим, доступно всем дочерним элементам вниз по дороге, которая завернута в этот провайдер. E.G, поскольку SBI завернут внутрь, SBI.JS имеет доступ к нему, так что Axis.js.
- Мы также создали небольшой участок кошелька, который будет отображать наши детали Wallet PayTM с помощью базового стиля.
Шаг 3: Мы создаем компонент SBI.JS, который имеет ничего, кроме своего дочернего компонента Axis.js
//Sbi.js
import Axis from "./Axis";
function Sbi() {
return (
Sbi
Шаг 4: Создание компонента AXIS.JS. Это где мы должны использовать упреждающий текст Чтобы схватить данные, которые мы прошли как реквизит для провайдера.
- В реакции мы можем либо следовать одному подходу, который создает потребительский объект из «MyContext». Но здесь мы будем следовать подходу «UseContext».
упреждающий текстЭто крючок (как и use exeffect и umestate), который используется для захвата ценностей опоры от ближайшего провайдера. Это работает, принимая объект контекста I.E MYCONTEXT, а затем возвращая ценность опоры ближайшего провайдера I.e Paytm.
import React from "react";
import MyContext from './MyContext'
function Axis() {
const value = React.useContext(MyContext)
return (
Axis received {value.amount} from Paytm through sbi by way of useContext
);
}
export default Axis;
Объяснение:
- Как видите, вариабельная «значение» содержит все значения «значения», которую мы прошли в провайдере. Таким образом, чтобы отобразить сумму, которая была передана, вы можете использовать
{Value.amount}Отказ - Но это не только государственные крючки, которые мы можем пройти как «реквизит» для провайдера, мы можем даже пройти объекты. E.G Если нам нужно применить определенный стиль, мы пропустим объект «суммы» и в оси мы можем использовать его в качестве
{Value.amountStyle}И это будет применять все стили как обычно. Посмотрите, насколько это легко, чем делать «бурение»!
В Paytm.js проходит в следующем «Сумме» ниже «Стиль» объекта:
const amountStyle = {
background: "black",
color: "red"
};
Теперь пропустите «сумму» к списку реквизитов ценности провайдера.
Шаг 5: Этот шаг будет одним из самых простых, потому что у вас уже есть идея о том, как сейчас работает контекст. Этот шаг включает в себя создание компонента «Total» и «баланса»:
//Total.js
import React from 'react'
import MyContext from './MyContext'
function Total() {
const value = React.useContext(MyContext)
return (
Total:{value.total}
)
}
export default Total;
//Balance.js
import React from 'react'
import MyContext from './MyContext'
function Balance() {
const value = React.useContext(MyContext)
return (
Balance:{value.total - value.amount}
)
}
export default Balance;
Объяснение: Хотя общая стоимость остается прежним, значение баланса динамически меняется в зависимости от количества, которая была передана из «PayTM Wallet» на «Axis». Попробуйте изменить значение «суммы» от 200 до 300. Вы можете заметить, что сумма «баланса» изменилась – это потому, что мы изменяем состояние «суммы» в PAYTM (Provider).
В конце весь код будет выглядеть что-то подобное: https://codesandox.io/s/react-bank-wallet-using-useContext-final-u8guh?file=/src/app.js
Примечание: Так что, если вы посмотрели вышеуказанный код, и вы думаете «Что бы я выиграл, просто проходящие ценности, я не думаю, что я буду использовать это часто!». Раньше я так думал, пока не начал строить большие приложения и передавать данные из одного компонента к другому, может оказаться общего беспорядком. Так что, если вы строете действительно небольшое приложение – продолжайте и используйте метод оперирования. Но, если у него есть как компоненты, которые вложены Real Deep – даже не думайте дважды, используйте контекст. Сначала он может быть запутанным, но вы получите это.
Что мы узнали до сих пор:
- Значение реквизит через пример компонента «родитель-ребенок».
- Бурение (когда использовать его и когда не использовать его)
- Понять, как работает деструктурирующие (см. Документы MDN для более)
- Как использовать контекст Ract – поставщик и концепция потребителей
- Как использовать крючок «USEContext», чтобы легко захватить данные из поставщика контекста путем создания приложения кошелька.
Как всегда, обязательный GIF здесь: Это будет вы после использования React Context впервые.
Оригинал: “https://dev.to/ridhikgovind/learn-react-context-by-building-a-dead-simple-wallet-app-for-beginners-20a5”