Hoe Reageren Verzoening Werkt

0
35

Reageer snel! Sommige van die snelheid komt uit het bijwerken van alleen de onderdelen van de DOM die het nodig hebben. Voor u een zorg minder over en een snelheid krijgen om op te starten. Zolang u inzicht in de werking van setState(), moet je goed om te gaan. Echter, het is ook belangrijk om vertrouwd te raken met hoe deze geweldige bibliotheek updates van de DOM van uw aanvraag. Dit wetende zal een grote rol spelen in uw werk als Reageren ontwikkelaar.

De DOM?

De browser bouwt de DOM door het ontleden van de code die je schrijft, dit gebeurt voordat het maakt de pagina. De DOM vormt documenten in de pagina als knooppunten en objecten, die een interface, zodat talen kunt sluiten, en het manipuleren van de DOM. Het probleem met de DOM is dat het niet is geoptimaliseerd voor dynamische UI toepassingen. Dus, het bijwerken van de DOM kan vertragen uw toepassing wanneer er een heleboel dingen veranderd te worden; als de browser opnieuw alle stijlen en maken nieuwe HTML-elementen. Dit gebeurt ook in situaties waar niets verandert.

Wat is Verzoening?

Verzoening is het proces waarmee Reageren op de updates van de DOM. Wanneer een onderdeel van de wijzigingen van de status, Reageren is te berekenen als het nodig is voor het bijwerken van de DOM. Het doet dit door het creëren van een virtuele DOM en te vergelijken met de huidige DOM. In deze context, de virtuele DOM bevat de nieuwe staat van het onderdeel.

Laten we een eenvoudig element dat voegt twee nummers. De getallen worden ingevoerd in een veld.

Zie de Pen verzoening Pen door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

Eerst zullen we moeten het opzetten van de initiële toestand voor de velden, het bijwerken van de staat als een nummer wordt ingevoerd. Het onderdeel zal er als volgt uitzien:

klasse App breidt Reageren.Onderdeel {

staat = {
resultaat: “,
entry1: “,
entry2:”
}

handleEntry1 = (gebeurtenis) => {
deze.setState({entry1: evenement.doel.value})
}

handleEntry2 = (gebeurtenis) => {
deze.setState({entry2: evenement.doel.value})
}

handleAddition = (gebeurtenis) => {
const firstInt = parseInt(deze.staat.entry1)
const secondInt = parseInt(deze.staat.entry2)
deze.setState({resultaat: firstInt + secondInt })
}

render() {
const { entry1, entry2, resultaat } = dit.staat
return(
<div>
<div>
<p>Item 1: { entry1 }</p>
<p>Item 2: { entry2 }</p>
<p>Resultaat: { gevolg }</p>
</div>
<br />
<div>
Item 1:
<input type=’text’ onChange={dit.handleEntry1} />
</div>
<br />
<div>
Item 2:
<input type=’text’ onChange={dit.handleEntry2} />
</div>
<div>
<button onClick={dit.handleAddition} type=’submit’>Toevoegen</button>
</div>
</div>
)
}
}

Op de eerste render, de DOM-boom zal er als volgt uitzien;

Wanneer een item is gemaakt in het eerste invoerveld, Reageren creëert een nieuwe boom. De nieuwe boom, die de virtuele DOM bevat de nieuwe staat voor entry1. Vervolgens Reageren vergelijkt de virtuele DOM met de oude DOM, en uit de vergelijking van cijfers uit het verschil tussen de beide DOMs en maakt een update voor alleen het deel dat anders. Een nieuwe boom is gemaakt telkens wanneer de stand van de App component verandert — wanneer een waarde wordt ingevoerd op een van de ingangen veld, of wanneer op de knop wordt geklikt.

Vergelijk De Verschillende Elementen

Wanneer de staat van een onderdeel, wordt gewijzigd zodat een element moet worden veranderd van het ene type naar het andere, Reageren hiermee ontkoppelt u de hele boom en bouwt een nieuwe uit het niets. Dit zorgt ervoor dat elke knoop in de boom te worden vernietigd.

Laten we een voorbeeld bekijken:

klasse App breidt Reageren.Onderdeel {

staat = {
wijzigen: true
}

handleChange = (gebeurtenis) => {
deze.setState({wijzigen: !deze.staat.wijzigen})
}

render() {
const { wijzigen } = dit.staat
return(
<div>
<div>
<button onClick={dit.handleChange}>Wijzigen</button>
</div>

{
veranderen ?
<div>
Dit is in div oorzaak dat het waar is
<h2>Dit is een h2 element in de div</h2>
</div> :
<p>
Dit is een element p want het is vals
<br />
Dit is een andere paragraaf in de valse lid
</p>
}
</div>
)
}
}

Op de eerste render, je zal zien dat de div en de inhoud ervan is en hoe te klikken op de knop zorgt ervoor Reageren om het vernietigen van de div ‘ s boom met de inhoud en de bouw van een boom voor het <p> element in de plaats. Hetzelfde gebeurt als we de component in beide gevallen. Het onderdeel zal worden vernietigd naast de vorige boom behoorde, en een nieuw exemplaar zal worden gebouwd. Bekijk de demo hieronder;

Zie de Pen verzoening-2 Pen door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

Vergelijk Lijsten

Reageren toetsen gebruikt voor het bijhouden van items in een lijst. De sleutels helpen bij het achterhalen van de positie van het item op een lijst. Wat gebeurt er als een lijst niet toetsen? Reageren zal muteren van ieder kind van de lijst, zelfs als er geen nieuwe wijzigingen.

In andere woorden, Reageren verandert elk item in een lijst die niet toetsen.

Hier is een voorbeeld:

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

klasse App breidt Reageren.Onderdeel {

staat = {
wijzigen: true
}

handleChange = (gebeurtenis) => {
deze.setState({wijzigen: !deze.staat.wijzigen})
}

render() {
const { wijzigen } = dit.staat
return(
<div>
<div>
<button onClick={dit.handleChange}>Wijzigen</button>
</div>

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

Hier hebben we twee arrays die weergegeven afhankelijk van de staat van het onderdeel. Reageren heeft geen manier van het houden van de items op de lijst, dus het is gebonden aan het wijzigen van de hele lijst op elk moment dat er een noodzaak om opnieuw te renderen. Dit resulteert in problemen met de prestaties.

In de console, ziet u een waarschuwing als deze:

Waarschuwing: Ieder kind in een array of een iterator een unieke “key” prop.

Om dit op te lossen, voeg je een unieke sleutel voor elk item op de lijst.

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

klasse App breidt Reageren.Onderdeel {

staat = {
wijzigen: true
}

handleChange = (gebeurtenis) => {
deze.setState({wijzigen: !deze.staat.wijzigen})
}

render() {
const { wijzigen } = dit.staat
return(
<div>
<div>
<button onClick={dit.handleChange}>Wijzigen</button>
</div>

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

Zie de Pen verzoening-3 Pen door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

Inpakken

Kortom, hier zijn de twee grote afhaalrestaurants voor het begrijpen van hoe het concept van verzoening werkt op Reageren:

  • Reageren kan uw UI snel, maar het moet je helpen. Het is goed om te begrijpen wat het proces van verzoening.
  • Reageren niet op een volledige rerender van uw DOM nodes. Het verandert alleen wat het nodig heeft. Het vergelijk proces gaat zo snel dat je merkt het misschien niet.