Reagera Stat Från Grunden

0
41

När du börjar att lära sig att Reagera, du kommer att ställas inför en förståelse för vad staten är. Staten är oerhört viktigt i Reagera, och kanske en stor anledning till att du har tittat in med hjälp Reagerar i första hand. Låt oss ta ett knivhugg på att förstå vad staten är och hur det fungerar.

Vad är Staten?

Staten, i Reagera, är en vanlig JavaScript-objekt som låter dig hålla koll på en komponent. Status för en komponent kan ändra. Ändra status för en komponent beror på funktionerna i programmet. Förändringar kan vara baserat på svar från användaren, nya meddelanden från server-side, nätverk svar, eller något.

Komponent staten förväntas att vara privat till komponent och kontrolleras av en och samma komponent. För att göra ändringar till en komponent är staten, du måste göra dem inne i komponent — initiering och uppdatering av komponentens tillstånd.

Klass Komponenter

Stater är endast tillgänglig för komponenter som kallas klass komponenter. Den främsta anledningen till att du vill använda klass komponenter över deras motsvarighet, funktionella komponenter, är att klass komponenter kan ha staten. Låt oss se skillnaden. Funktionella komponenter är JavaScript-funktioner, som den här:

const App = (rekvisita) => {
avkastning (
<div>
{ detta.rekvisita }
</div>
)
}

Om de funktioner som du behöver från din komponent är lika enkel som den ovan, kommer en funktionell del är det perfekt passform. En klass komponent kommer att se en mycket mer komplex än så.

klass App sträcker sig Reagera.Komponent {
konstruktör(rekvisita) {
super(rekvisita)
detta.state = { username: ‘johndoe’ }
}
render() {
const { användarnamn } = i detta.staten
avkastning(
<div>
{ användarnamn }
</div>
)
}
}

Ovan är jag att ställa tillstånd av komponenten användarnamn för att en sträng.

Konstruktören

Enligt den officiella dokumentationen, konstruktören är rätt ställe att initiera staten. Initiering av tillstånd görs genom att ställa in denna.tillstånd till ett objekt, som du kan se ovan. Kom ihåg: staten är en enkel JavaScript-objekt. Det ursprungliga tillståndet av Appen komponent har ändrats till ett statligt objekt som innehåller de viktigaste användarnamn, och dess värde johndoe med detta.state = { username: ‘johndoe’ }.

Att initiera en komponent stat kan få så komplicerat som det du kan se här:

konstruktör(rekvisita) {
super(rekvisita)
detta.state = {
currentTime: 0,
status: false,
btnOne: false,
todoList: [],
namn: “John Doe’
}
}

Åtkomst Till Staten

En initierad staten kan nås i render () – metoden, som jag gjorde ovan.

render() {
const { användarnamn } = i detta.staten
avkastning(
<div>
{ användarnamn }
</div>
)
}

Ett alternativ till ovanstående utdrag:

render() {
avkastning(
<div>
{ detta.stat.username }
</div>
)
}

Skillnaden är att jag extraherade användarnamn från staten i första exempel, men det kan också skrivas som const status = i detta.stat.användarnamnet. Tack för att ES6 omstrukturering av valutan, jag behöver inte gå den vägen. Du behöver inte bli förvirrad när du ser saker som detta. Det är viktigt att veta att jag inte är omfördelning av staten när jag gjorde det. Den första installationen av staten var gjort i konstruktorn, och bör inte göras igen – uppdatera aldrig din komponent stat direkt.

En stat kan nås med hjälp av detta.stat.egenskap-namn. Glöm inte att bortsett från den punkt där du initierad ditt tillstånd, nästa gång du är att använda sig av detta.staten är när du vill komma åt staten.

Uppdatering Av Tillstånd

Det enda tillåtna sättet att uppdatera en komponents tillstånd är genom att använda setState(). Låt oss se hur detta fungerar i praktiken.

För det första, jag kommer att börja med att skapa den metod som anropas för att uppdatera komponenten användarnamn. Denna metod bör ta emot ett argument, och det förväntas att använda som argument för att uppdatera läget.

handleInputChange(användarnamn) {
detta.setState({användarnamn})
}

Återigen, du kan se att jag passerar i ett objekt för att setState(). Med det gjort, jag kommer att behöva passera denna funktion för att händelse-hanterare som anropas när värdet av en input-rutan ändras. Händelsehanterare kommer att ge ramen för den händelse som utlöste vilket gör det möjligt att erhålla värdet i rutan med hjälp av händelsen.- målet.värde. Detta är argument som skickas till handleInputChange () – metoden. Så, render-metoden bör se ut så här.

render() {
const { användarnamn } = i detta.staten
avkastning (
<div>
<div>
<ingång
type=”text”
värde={detta.stat.username}
onChange={event => här.handleInputChange(händelse.- målet.värde)}
/>
</div>
<p>Ditt användarnamn, {användarnamn}</p>
</div>
)
}

Varje gång setState() anropas skickas en förfrågan att Reagera på att uppdatera DOM med hjälp av den nyligen uppdaterade staten. Med denna inställning gör att du förstår att staten uppdatering kan vara fördröjda.

Din komponent ska se ut så här;

klass App sträcker sig Reagera.Komponent {
konstruktör(rekvisita) {
super(rekvisita)
detta.state = { username: ‘johndoe’ }
}
handleInputChange(användarnamn) {
detta.setState({användarnamn})
}
render() {
const { användarnamn } = i detta.staten
avkastning (
<div>
<div>
<ingång
type=”text”
värde={detta.stat.username}
onChange={event => här.handleInputChange(händelse.- målet.värde)}
/>
</div>
<p>Ditt användarnamn, {användarnamn}</p>
</div>
)
}
}

Passerar Staten som Rekvisita

En stat kan skickas som rekvisita från en förälder till barn komponent. För att se detta in action, låt oss skapa en ny komponent för att skapa en Att Göra-Lista. Denna komponent kommer att ha ett fält för att ange dagliga uppgifter och de uppgifter som skickas som rekvisita till barn komponent.

Försök att skapa den överordnade delen på din egen, med hjälp av de lektioner du har lärt dig hittills.

Låt oss börja med att skapa den initiala tillstånd av komponenten.

klass App sträcker sig Reagera.Komponent {
konstruktör(rekvisita) {
super(rekvisita)
detta.state = { todoList: [] }
}
render() {
return()
}
}

Komponentens tillstånd har sin todoList ställa till en tom array. I metoden render (), jag vill returnera en blankett för inlämning av uppgifter.

render() {
const { todoList } = i detta.staten
avkastning (
<div>
<h2>skriv In din att-göra – </h2>
<formen onSubmit={detta.handleSubmit}>
<label> – Todo Posten</label>
<ingång
type=”text”
namn=”todoitem”
/>
<button type=”submit”>Skicka</button>
</form>
</div >
)
}

Varje gång en ny artikel skrivs in och skicka-knappen är tryckt, metod handleSubmit blir kallad. Denna metod kommer att användas för att uppdatera läget för den komponent. Det sätt som jag vill uppdatera det genom att använda concat att lägga till det nya värdet i todoList array. Gör så sätter värdet för todoList inuti setState () – metoden. Här är hur det bör se ut:

handleSubmit = (event) => {
händelsen.preventDefault()
const värde = (händelse.- målet.elementen.todoitem.värde)
detta.setState(({todoList}) => ({
todoList: todoList.concat(värde)
}))
}

Den händelse sammanhang erhålls varje gång skicka-knappen klickas. Vi använder händelse.preventDefault() för att stoppa standardåtgärd för inlämning som skulle ladda om sidan. Värdet i fältet tilldelas en variabel som heter värde, som sedan skickas ett argument när todoList.concat() anropas. Reagera uppdateringar staten todoList genom att lägga till ett nytt värde till det första tomma rad. Denna nya matris blir det nuvarande tillståndet i todoList. När en annan punkt har lagts till cykeln upprepas.

Målet här är att passera den enskilda objekt till en underordnad komponent som rekvisita. För den här guiden, vi kallar det TodoItem komponent. Lägg till koden nedan i den överordnade div som du har i render () – metoden.

<div>
<h2>Din todo-listor inkluderar:</h2>
{ todoList.karta(i => <TodoItem artikel={i} /> )}
</div>

Du använder kartan för att slinga genom todoList array, vilket betyder att den enskilda objekt förs sedan till TodoItem komponent som rekvisita. För att utnyttja detta måste du ha en TodoItem komponenten som tar emot rekvisita och gör det på DOM. Jag kommer att visa dig hur man gör detta med hjälp av funktionella och klass komponenter.

Skriven som en funktionell del:

const TodoItem = (rekvisita) => {
avkastning (
<div>
{rekvisita.objekt}
</div>
)
}

För klass komponent, skulle det vara:

klass TodoItem sträcker sig Reagera.Komponent {
konstruktör(rekvisita) {
super(rekvisita)
}
render() {
const {objekt} = i detta.rekvisita
avkastning (
<div>
{objekt}
</div>
)
}
}

Om det inte finns något behov av att hantera tillståndet i denna del, du är bättre att använda funktionell komponent.

Utjämning Upp

Du kommer att hantera tillståndet mycket ofta samtidigt utveckla Reagera ansökan. Med alla de områden som beskrivs ovan, du bör ha förtroende för att kunna dyka in i den avancerade delen av statlig förvaltning i att Reagera. För att gräva djupare, jag rekommenderar att Reagera officiell dokumentation på Staten och Livscykel samt Uber s Reagera Guide på Rekvisita vs Staten.