Hvordan Reagerer Avstemming Fungerer

0
36

Reagere raskt! Enkelte av at hastigheten kommer fra oppdaterer bare deler av den DOM som trenger det. Mindre for deg å bekymre deg for og en hastighet få til å starte. Så lenge du forstår hvordan setState(), du bør være godt å gå. Det er imidlertid også viktig å gjøre deg kjent med hvordan dette fantastiske bibliotek oppdateringer DOM av din søknad. Det å vite at dette vil være instrumental i ditt arbeid som Reagerer utvikler.

DOM?

Nettleseren bygger DOM av parsing koden du skriver, det gjør dette før du gjør det siden. DOM representerer dokumenter i siden som noder og objekter, og gir et grensesnitt slik at programmeringsspråk kan plugge inn og manipulere DOM. Problemet med den DOM er at det er ikke optimalisert for dynamisk UI-applikasjoner. Så, oppdatere DOM kan bremse-programmet når det er en masse ting som skal endres, som nettleseren har til å bruke alle stiler og gjøre nye HTML-elementer. Dette skjer også i situasjoner der ingenting endres.

Hva er Forsoning?

Forsoning er den prosess som Reagerer oppdateringer DOM. Når en komponent er state endringer, Reagere har til å beregne om det er nødvendig å oppdatere DOM. Den gjør dette ved å opprette en virtuell DOM og sammenligne det med dagens DOM. I denne sammenheng, den virtuelle DOM vil inneholde den nye staten av den del.

La oss bygge en enkel komponent som legger til to tall. Tallene vil være angitt i et tekstfelt.

Se Penn avstemming Pennen av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

For det første, vi trenger å sette opp den første staten for feltene, og deretter oppdatere staten når et nummer er tastet inn. Komponenten vil se ut som dette:

klasse App strekker seg til å Reagere.Komponent {

tilstand = {
resultat: “,
entry1: “,
entry2:”
}

handleEntry1 = (event) => {
dette.setState({entry1: event.målet.value})
}

handleEntry2 = (event) => {
dette.setState({entry2: event.målet.value})
}

handleAddition = (event) => {
const firstInt = parseInt(denne.staten.entry1)
const secondInt = parseInt(denne.staten.entry2)
dette.setState({resultat: firstInt + secondInt })
}

render() {
const { entry1, entry2, resultat } = dette.staten
retur(
<div>
<div>
<p> – Oppføring 1: { entry1 }</p>
<p>Oppføringen 2: { entry2 }</p>
<p>Resultat: { resultat }</p>
</div>
<br />
<div>
Oppføring 1:
<input type=’tekst’ onChange={dette.handleEntry1} />
</div>
<br />
<div>
Oppføring 2:
<input type=’tekst’ onChange={dette.handleEntry2} />
</div>
<div>
<- knappen for onClick={dette.handleAddition} type= “send” >Legg til</button>
</div>
</div>
)
}
}

På første gjengi, DOM-treet vil se ut som dette;

Når en oppføring er gjort i det første feltet, Reagerer skaper et nytt tre. Det nye treet som er den virtuelle DOM vil inneholde den nye staten for entry1. Så, Reagerer sammenligner den virtuelle DOM med den gamle DOM, og fra sammenligningen, er det tall ut forskjellen mellom både DOMs-og gjør en oppdatering til bare den delen som er annerledes. En ny treet er laget hver gang staten App komponent endringer — når en verdi er angitt i en av inngangene feltet, eller når knappen klikkes.

Diffing Ulike Elementer

Når tilstanden til en komponent endres slik at et element som må endres fra en type til en annen, Reagerer unmounts hele treet, og bygger en ny en fra scratch. Dette fører til at hver node i treet for å bli ødelagt.

La oss se på et eksempel:

klasse App strekker seg til å Reagere.Komponent {

tilstand = {
endre: true
}

handleChange = (event) => {
dette.setState({endring: !dette.staten.endre})
}

render() {
const { endre,} = dette.staten
retur(
<div>
<div>
<- knappen for onClick={dette.handleChange}>Bytt</button>
</div>

{
endre ?
<div>
Dette er div fordi det er sant
<h2>Dette er en h2 element i div</h2>
</div> :
<p>
Dette er en p-element føre til at det er falsk
<br />
Dette er et ledd i den falske avsnitt
</p>
}
</div>
)
}
}

På første gjengi, vil du se div og dens innhold og hvordan å klikke på knappen årsaker Reagere med å ødelegge div ‘ s tre med innhold og bygge opp et tre for <p> – element i stedet. Samme skjer hvis vi har den samme komponent i begge tilfeller. Komponenten vil bli ødelagt ved siden forrige treet den tilhørte, og en ny instans vil bli bygget. Se demo nedenfor;

Se Penn forsoning-2 Pennen av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Diffing Lister

Reagerer bruker tastene for å holde oversikt over elementer i en liste. Tastene hjelpe det til å finne ut plasseringen av element på en liste. Hva skjer når en liste ikke har nøkler? Reagerer vil mutere alle barn i listen, selv om det er ingen nye endringer.

Med andre ord, Reagerer endringer hvert element i en liste som ikke har nøkler.

Her er et eksempel:

const firstArr = [‘codepen’, ‘codesandbox’]
const secondArr = [‘github’, ‘codepen’, ‘bitbucket’, ‘codesanbox’]

klasse App strekker seg til å Reagere.Komponent {

tilstand = {
endre: true
}

handleChange = (event) => {
dette.setState({endring: !dette.staten.endre})
}

render() {
const { endre,} = dette.staten
retur(
<div>
<div>
<- knappen for onClick={dette.handleChange}>Bytt</button>
</div>

<ul>
{
endre ?
firstArr.kart((e) => <li>{e}</li>)
:
secondArr.kart((e) => <li>{e}</li>)
}
</ul>
</div>
)
}
}

Her har vi to matriser som får gjengitt avhengig av staten av den del. Reagere har ingen mulighet til å holde oversikt over elementene på listen, så det er bundet til å endre hele listen hver gang det er behov for å re-render. Dette resulterer i en ytelse.

I konsollen, vil du se en advarsel som dette:

Advarsel: Hvert barn i en matrise eller iterator bør ha en unik “nøkkel” prop.

For å fikse dette, legger du til en unik nøkkel for hvert element på listen.

const firstArr = [‘codepen’, ‘codesandbox’]
const secondArr = [‘github’, ‘codepen’, ‘bitbucket’, ‘codesanbox’]

klasse App strekker seg til å Reagere.Komponent {

tilstand = {
endre: true
}

handleChange = (event) => {
dette.setState({endring: !dette.staten.endre})
}

render() {
const { endre,} = dette.staten
retur(
<div>
<div>
<- knappen for onClick={dette.handleChange}>Bytt</button>
</div>

<ul>
{
endre ?
firstArr.kart((e, index) => <li key={e.indeks}>{e}</li>)
:
secondArr.kart((e, index) => <li key={e.indeks}>{e}</li>)
}
</ul>
</div>
)
}
}

Se Penn forsoning-3 Pennen av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Innpakning Opp

I sammendraget, her er de to store takeaways for å forstå hvordan begrepet forsoning fungerer i Reagerer:

  • Reagerer kan lage din UI rask, men den trenger din hjelp. Det er godt å forstå sin forsoning prosessen.
  • Reagerer ikke gjøre en full rerender av din DOM noder. Det endrer bare hva det er behov for. Den diffing prosessen er så rask at du kanskje ikke legger merke til det.