Reagerer Staten Fra Bakken Opp

0
65

Når du begynner å lære å Reagere, vil du bli møtt med forståelse, og det er staten. Tilstanden er svært viktig i å Reagere, og kanskje en stor grunn til at du har sett på ved hjelp av Reagere i første omgang. La oss ta en stikke på å forstå hva staten er, og hvordan det fungerer.

Hva er Staten?

Staten, Reagere, er en vanlig JavaScript-objekt som lar deg holde styr på en komponent data. Tilstanden til en komponent kan endres. Endre tilstanden til en komponent, avhenger av funksjonaliteten til programmet. Endringer kan være basert på brukerens respons, nye meldinger fra server-side, nettverk svar, eller noe.

Komponent staten er forventet å være privat til komponenten og kontrollert av samme komponent. For å gjøre endringer i en komponent staten, du har å gjøre dem inne i komponent — initialisering og oppdatering av komponenten staten.

Førsteklasses Komponenter

Stater er kun tilgjengelig for komponenter som er kalt førsteklasses komponenter. Den viktigste grunnen til at du vil ønske å bruke førsteklasses komponenter over sin kollega, funksjonelle komponenter, er at klasse komponenter kan ha tilstanden. La oss se forskjellen. Funksjonelle komponenter er JavaScript-funksjoner, som dette:

const App = (props) => {
retur (
<div>
{ dette.rekvisitter }
</div>
)
}

Hvis den funksjonaliteten du trenger fra din komponent er like enkel som den ovenfor, så en funksjonell komponent er den perfekte passform. En klasse komponent vil se en mye mer kompleks enn som så.

klasse App strekker seg til å Reagere.Komponent {
constructor(props) {
super(props)
dette.tilstand = { brukernavn: ‘johndoe’ }
}
render() {
const { brukernavn } = dette.staten
retur(
<div>
{ brukernavn }
</div>
)
}
}

Ovenfor, er jeg stille staten til komponenten brukernavn til en streng.

Konstruktøren

I henhold til den offisielle dokumentasjonen, konstruktør er rett sted å starte staten. Initialiserer staten er gjort ved å sette dette.tilstanden til et objekt, som du kan se ovenfor. Husk: staten er en ren JavaScript-objekt. Den første state of the App komponent har blitt satt til en tilstand objekt som inneholder nøkkelen brukernavn, og dens verdi johndoe ved hjelp av denne.tilstand = { brukernavn: ‘johndoe’ }.

Initialiserer en komponent staten kan få så komplisert som det kan du se her:

constructor(props) {
super(props)
dette.tilstand = {
currentTime: 0,
status: false,
btnOne: false,
todoList: [],
name: ‘John Doe’
}
}

Få Tilgang Til Staten

Et initialisert staten kan nås i render () – metoden, som jeg gjorde ovenfor.

render() {
const { brukernavn } = dette.staten
retur(
<div>
{ brukernavn }
</div>
)
}

Et alternativ til ovennevnte kodebiten er:

render() {
retur(
<div>
{ dette.staten.brukernavn }
</div>
)
}

Forskjellen er at jeg pakket ut brukernavn fra staten i det første eksempelet, men det kan også skrives som const status = dette.staten.brukernavnet. Takk til ES6 destructuring, jeg trenger ikke å gå den veien. Ikke bli forvirret når du ser ting som dette. Det er viktig å vite at jeg ikke er reassigning staten når jeg gjorde det. Den innledende konfigureringen av staten ble gjort i konstruktøren, og bør ikke gjøres igjen – aldri oppdatere komponent staten direkte.

En stat kan nås ved hjelp av denne.staten.eiendom-navnet. Ikke glem at bortsett fra det punktet der du initialisert staten, neste gang du er å gjøre bruk av dette.staten er når du vil ha tilgang til staten.

Oppdatering Av Staten

Den eneste lovlige måten å oppdatere en komponent er staten ved hjelp av setState(). La oss se hvordan dette fungerer praktisk.

Først vil jeg starte med å lage den metoden som blir kalt til å oppdatere komponent brukernavn. Denne metoden bør motta et argument, og det er forventet å bruke som argument for å oppdatere tilstand.

handleInputChange(brukernavn) {
dette.setState({brukernavn})
}

Igjen, du kan se at jeg passerer i et objekt for å setState(). Med det gjort, jeg trenger å passere denne funksjonen til hendelseshåndterer som blir kalt når verdien av en inndataboks er endret. Den hendelseshåndterer vil gi konteksten av hendelsen som ble utløst som gjør det mulig å få den verdien som er angitt i boksen ved hjelp av hendelsen.målet.verdi. Dette er argumentet gått til handleInputChange () – metoden. Så, render metoden bør se ut som dette.

render() {
const { brukernavn } = dette.staten
retur (
<div>
<div>
<input
type=”text”
value={dette.staten.brukernavn}
onChange={event => dette.handleInputChange(event.målet.verdien)}
/>
</div>
<p>brukernavnet Ditt er, {brukernavn}</p>
</div>
)
}

Hver gang setState() kalles på, sendes en anmodning til å Reagere for å oppdatere DOM ved hjelp av den nylig oppdatert staten. Å ha denne tankegangen gjør du forstå at staten oppdateringen kan være forsinket.

Din komponenten bør se ut som dette;

klasse App strekker seg til å Reagere.Komponent {
constructor(props) {
super(props)
dette.tilstand = { brukernavn: ‘johndoe’ }
}
handleInputChange(brukernavn) {
dette.setState({brukernavn})
}
render() {
const { brukernavn } = dette.staten
retur (
<div>
<div>
<input
type=”text”
value={dette.staten.brukernavn}
onChange={event => dette.handleInputChange(event.målet.verdien)}
/>
</div>
<p>brukernavnet Ditt er, {brukernavn}</p>
</div>
)
}
}

Passerer Staten som Rekvisitter

En stat kan sendes som rekvisitter fra en forelder til barnet komponent. Å se dette i aksjon, la oss lage en ny komponent for å lage en Liste over gjøremål. Denne komponenten vil ha en input-feltet for å angi daglige oppgaver, og oppgavene vil bli vedtatt som rekvisitter til barnet komponent.

Prøv å lage overordnede komponent på din egen, ved hjelp av undervisningene du har lært så langt.

La oss starte med å lage den første state of the komponent.

klasse App strekker seg til å Reagere.Komponent {
constructor(props) {
super(props)
dette.tilstand = { todoList: [] }
}
render() {
retur()
}
}

Komponenten staten har sin todoList satt til en tom tabell. I render () – metoden, jeg ønsker å returnere et skjema for å sende inn oppgaver.

render() {
const { todoList } = dette.staten
retur (
<div>
<h2>Enter-å-gjøre – </h2>
<form onSubmit={dette.handleSubmit}>
<label>Todo Elementet</label>
<input
type=”text”
name=”todoitem”
/>
<- knappen type=”submit”>Send</button>
</form>
</div >
)
}

Hver gang et nytt element er lagt inn, og send-knappen er klikket, metode handleSubmit blir kalt. Denne metoden vil bli brukt til å oppdatere staten av den del. Den måten jeg ønsker å oppdatere den ved hjelp av concat for å legge til en ny verdi i todoList utvalg. Gjør du det vil du sette verdien for todoList inne i setState () – metoden. Her er hvordan det skal se ut:

handleSubmit = (event) => {
event.preventDefault()
const verdi = (event.målet.elementer.todoitem.verdien)
dette.setState(({todoList}) => ({
todoList: todoList.concat(verdi)
}))
}

Arrangementet sammenheng er innhentet hver tid send-knappen er klikket på. Vi bruker event.preventDefault() for å stoppe standard action for innsending som ville laste inn siden på nytt. Den verdien som er angitt i felt som er tilordnet en variabel kalt verdi, som deretter sendes et argument når todoList.concat() kalles. Reagerer oppdateringer staten todoList ved å legge til den nye verdien til den første tom tabell. Denne nye tabellen blir den nåværende tilstand av todoList. Når et nytt element er lagt til, gjentar syklusen.

Målet her er å passere den enkelte element til et barn komponent som rekvisitter. For denne opplæringen, vil vi kaller det TodoItem komponent. Legg til kodebiten nedenfor inne i den overordnede div som du har i render () – metoden.

<div>
<h2>todo lister inkluderer:</h2>
{ todoList.kart(jeg => <TodoItem item={i} /> )}
</div>

Du bruker kart for å sløyfe gjennom todoList utvalg, noe som betyr at den enkelte varen sendes deretter til TodoItem komponent som rekvisitter. For å gjøre bruk av dette, må du ha en TodoItem komponent som mottar rekvisitter, og gjør det på DOM. Jeg vil vise deg hvordan å gjøre dette ved hjelp av funksjonelle og førsteklasses komponenter.

Skrevet som en funksjonell komponent:

const TodoItem = (props) => {
retur (
<div>
{rekvisitter.elementet}
</div>
)
}

For klasse komponent, ville det være:

klasse TodoItem strekker seg til å Reagere.Komponent {
constructor(props) {
super(props)
}
render() {
const {element,} = dette.rekvisitter
retur (
<div>
{element,}
</div>
)
}
}

Hvis det er ingen grunn til å styre staten i denne komponenten, du er bedre ved hjelp av funksjonell komponent.

Nivåheving

Du vil bli håndtering av staten svært ofte samtidig utvikle Reagere programmet. Med alle områdene som er beskrevet ovenfor, du bør ha selvtillit nok til å være i stand til å dykke inn i den avanserte delen av statlig styring i å Reagere. For å grave dypere, anbefaler jeg Reagerer er offisiell dokumentasjon på Staten og Livssyklus samt Uber er Reagere Guide på Rekvisitter vs Stat.