Hur Reagerar Försoning Fungerar

0
38

Reagerar snabbt! En del av denna hastighet kommer uppdateras endast de delar av den DOM som behöver det. Mindre för dig att oroa dig för en hastighet få starta. Så länge du förstår hur setState(), bör du vara bra att gå. Men det är också viktigt att bekanta dig med hur detta fantastiska bibliotek uppdateringar DOM av din ansökan. Att veta detta kommer att vara avgörande i ditt arbete som Reagerar utvecklare.

DOM?

Webbläsaren bygger DOM genom att analysera koden du skriver, det gör det här innan det gör sidan. DOM utgör handlingar i den sida som noder och objekt, med ett gränssnitt så att programmeringsspråk kan koppla in och manipulera DOM. Problemet med DOM är att det inte är optimerad för dynamisk UI applikationer. Så, uppdatera DOM kan bromsa din ansökan när det finns en massa saker som ska ändras, som har webbläsaren för att annullera alla stilar och göra nya HTML-element. Detta händer också i situationer där inget förändras.

Vad är Försoning?

Försoning är den process genom vilken Reagera uppdateringar DOM. När en komponent tillstånd ändras, Reagera har att räkna ut om det är nödvändigt att uppdatera DOM. Det gör detta genom att skapa en virtuell DOM och jämföra det med dagens DOM. I detta sammanhang, den virtuella DOM kommer att innehålla det nya tillståndet hos komponenten.

Låt oss bygga en enkel komponent som lägger till två siffror. Siffrorna kommer att skrivas in i ett inmatningsfält.

Se Pennan försoning Penna av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Första, vi måste ställa upp det ursprungliga tillståndet för fält, för att sedan uppdatera staten när ett nummer anges. Komponenten kommer att se ut så här:

klass App sträcker sig Reagera.Komponent {

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

handleEntry1 = (event) => {
detta.setState({entry1: händelse.- målet.värde})
}

handleEntry2 = (event) => {
detta.setState({entry2: händelse.- målet.värde})
}

handleAddition = (event) => {
const firstInt = parseInt(det här.stat.entry1)
const secondInt = parseInt(det här.stat.entry2)
detta.setState({resultat: firstInt + secondInt })
}

render() {
const { entry1, entry2, resultat } = i detta.staten
avkastning(
<div>
<div>
<p> – Post 1: { entry1 }</p>
<p> – Post 2: { entry2 }</p>
<p>Resultatet: { resultat }</p>
</div>
<br />
<div>
Inlägg 1:
<input type=’text’ onChange={detta.handleEntry1} />
</div>
<br />
<div>
Inlägg 2:
<input type=’text’ onChange={detta.handleEntry2} />
</div>
<div>
<button onClick={detta.handleAddition} type= “skicka” >Lägg till</button>
</div>
</div>
)
}
}

På första göra, DOM-trädet kommer att se ut så här;

När en post är tillverkad i det första inmatningsfältet, Reagera skapar ett nytt träd. Den nya träd som är den virtuella DOM kommer att innehålla den nya staten för entry1. Då Reagerar jämför den virtuella DOM med DOM gamla, och från och med den jämförelsen, för det räknar ut skillnaden mellan de båda DOMs och gör en uppdatering för att endast den del som är annorlunda. Ett nytt träd skapas varje gång staten Appen del förändringar — när ett värde är angivet i någon av ingångarna fältet eller när du klickat på knappen.

Diffing Olika Delar

När staten en del förändringar så att en del behöver ändras från en typ till en annan, Reagera demonterar hela träd och bygger upp en ny från grunden. Detta medför att varje nod i trädet för att förstöras.

Låt oss se ett exempel:

klass App sträcker sig Reagera.Komponent {

state = {
förändring: sanna
}

handleChange = (event) => {
detta.setState({förändring: !detta.stat.ändra})
}

render() {
const { ändra, tryck på } = i detta.staten
avkastning(
<div>
<div>
<button onClick={detta.handleChange}>Ändra</button>
</div>

{
förändring ?
<div>
Detta är div orsak det är sant
<h2>Detta är en h2-element i div</h2>
</div> :
<p>
Detta är en p-elementet för att det är falskt
<br />
Detta är en annan punkt i den falska punkt
</p>
}
</div>
)
}
}

På första gör, kommer du att se div och dess innehåll och hur att klicka på knappen gör att Reagera på att förstöra div träd med dess innehåll och bygga ett träd för <p> – elementet istället. Samma sak händer om vi har samma komponent i båda fallen. Komponenten kommer att förstöras vid sidan av de tidigare träd som det tillhörde, och en ny instans kommer att byggas. Se demo nedan.

Se Pennan försoning-2 Pen av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Diffing Listor

Reagera använder nycklar att hålla reda på objekt i en lista. Nycklarna hjälpa det att räkna ut positionen för punkt på en lista. Vad händer när en lista har inte nycklar? Reagera kommer att mutera varje barn i listan även om det inte finns några nya förändringar.

Med andra ord, Reagera på förändringar varje objekt i en lista som inte har nycklar.

Här är ett exempel:

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

klass App sträcker sig Reagera.Komponent {

state = {
förändring: sanna
}

handleChange = (event) => {
detta.setState({förändring: !detta.stat.ändra})
}

render() {
const { ändra, tryck på } = i detta.staten
avkastning(
<div>
<div>
<button onClick={detta.handleChange}>Ändra</button>
</div>

<ul>
{
förändring ?
firstArr.karta (e) => <li>{e}</li>)
:
secondArr.karta (e) => <li>{e}</li>)
}
</ul>
</div>
)
}
}

Här har vi två matriser som får återges beroende på tillståndet hos komponenten. Reagera har inget sätt att hålla koll på sakerna på listan, så det är bundna till ändra hela listan varje gång det finns ett behov av att åter göra. Detta resulterar i prestanda.

I din konsol, kommer du att se en varning här:

Varning: Varje barn i en matris eller en iterator bör ha en unik “key” (prop.

För att åtgärda detta kan du lägga till en unik nyckel för varje punkt på listan.

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

klass App sträcker sig Reagera.Komponent {

state = {
förändring: sanna
}

handleChange = (event) => {
detta.setState({förändring: !detta.stat.ändra})
}

render() {
const { ändra, tryck på } = i detta.staten
avkastning(
<div>
<div>
<button onClick={detta.handleChange}>Ändra</button>
</div>

<ul>
{
förändring ?
firstArr.karta (e, index) => <li key={e.index}>{e}</li>)
:
secondArr.karta (e, index) => <li key={e.index}>{e}</li>)
}
</ul>
</div>
)
}
}

Se Pennan försoning-3 Penna av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Att Linda Upp

I sammanfattning, här är de två stora hämtställen för att förstå hur begreppet försoning fungerar Reagera:

  • Reagera kan göra ditt UI snabbt, men det behöver din hjälp. Det är bra att förstå dess försoningsprocessen.
  • Reagerar inte gör en komplett rerender av din DOM-noder. Det enda förändringar vad den behöver. Den diffing processen är så snabb att du kanske inte märker det.