Begrip Reageren `setState`

0
41

Reageren onderdelen kunnen, en vaak doen, hebben staat. De staat kan van alles zijn, maar denk aan dingen zoals of een gebruiker is ingelogd of niet en het weergeven van de juiste gebruikersnaam op basis van welk account actief is. Of een reeks blogberichten. Of als een modaal is geopend of niet en welk tabblad actief is.

Reageren componenten met state renderen UI op basis van die staat. Wanneer de staat van de onderdelen, dan verandert de component UI.

Dat maakt het begrijpen wanneer en hoe u de status van uw component is belangrijk. Aan het einde van deze tutorial, je moet weten hoe setState werken, en in staat zijn om bekende valkuilen te vermijden dat velen van ons geraakt toen bij het leren Reageren.

Werking van `setState()`

setState() is de enige legitieme manier om status update na de initiële setup staat. Laten we zeggen dat we een onderdeel zoeken en wilt u de zoekopdracht van een gebruiker.

Hier is de setup:

importeren Reageren, { Component } van ‘reageren’

klasse Zoeken breidt Onderdeel {
constructor(rekwisieten) {
super(props)

staat = {
zoekterm:”
}
}
}

We passeren een lege string als waarde en het bijwerken van de status van de zoekterm voorkomen, hebben wij bellen setState().

setState({ zoekterm: evenement.doel.value })

Hier hebben we het passeren van een object te setState(). Het object bevat de kant van de overheid willen we de update die in dit geval is de waarde van de zoekterm voorkomen. Reageren vindt deze waarde en voegt ze in het object dat nodig is. Het is een beetje zoals de Zoek-component vraagt wat het zou moeten gebruiken voor de waarde van de zoekterm en setState() reageert met een antwoord.

Dit is in principe kick-off van een proces dat Reageren oproepen verzoening. Het afstemmingsproces is de manier Reageren op de updates van de DOM, door het maken van veranderingen aan op de component-gebaseerd op de verandering in staat. Wanneer het verzoek om setState() is geactiveerd, Reageert creëert een nieuwe structuur met de reactieve elementen in het onderdeel (samen met de bijgewerkte status). Deze boom wordt gebruikt om erachter te komen hoe de Zoekfunctie van de UI moet veranderen in reactie op de toestand veranderen door het te vergelijken met de elementen van de vorige boom. Reageren weet welke wijzigingen toe te passen en alleen een update van de onderdelen van de DOM waar nodig. Dit is de reden waarom Reageer snel.

Dat klinkt als veel, maar voor de som van de stromen:

  • We hebben een search-onderdeel dat geeft een zoekterm in
  • Die zoekterm is momenteel leeg
  • De gebruiker een zoekterm in
  • Dit begrip wordt opgevangen en opgeslagen setState als een waarde
  • Afstemming plaatsvindt en Reageren merkt de verandering in waarde
  • Reageren instrueert de zoek-component voor het bijwerken van de waarde van de zoekterm is samengevoegd in

Het afstemmingsproces niet noodzakelijkerwijs het gehele boom, behalve in een situatie waar de wortel van de boom is veranderd is, zoals deze:

// oud
<div>
<Zoeken />
</div>

// nieuw
<span>
<Zoeken />
</span>

Alle <div> – tags worden <span> – tags en de hele component boom zal worden bijgewerkt als gevolg.

De vuistregel is om nooit te muteren staat direct. Gebruik altijd setState() om status te wijzigen. Het wijzigen van de staat rechtstreeks, zoals in het fragment hieronder zal niet leiden tot de component opnieuw moet renderen.

// doe dit niet
deze.staat = {
zoekterm: evenement.doel.waarde
}

Het passeren van een Functie `setState()`

Om dit aan te tonen idee verder, maken we een eenvoudige teller die verhoogt en verlaagt het aantal op te klikken.

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

Laten we het registreren van de component en het definiëren van de markup voor de GEBRUIKERSINTERFACE:

klasse App breidt Reageren.Onderdeel {

staat = { count: 0 }

handleIncrement = () => {
deze.setState({ count: dit.staat.teller + 1 })
}

handleDecrement = () => {
deze.setState({ count: dit.staat.count – 1 })
}
render() {
return (
<div>
<div>
{dit.staat.count}
</div>
<button onClick={dit.handleIncrement}>Verhogen met 1</button>
<button onClick={dit.handleDecrement}>met 1 Verminderd</button>
</div>
)
}
}

Op dit punt, de teller gewoon worden verhoogd of verlaagd de teller met 1 voor elke klik.

Maar wat als we wilden verhogen of verlagen door 3 in plaats? We zouden kunnen proberen te bellen setState() drie keer in de handleDecrement en handleIncrement functies zoals dit:

handleIncrement = () => {
deze.setState({ count: dit.staat.teller + 1 })
deze.setState({ count: dit.staat.teller + 1 })
deze.setState({ count: dit.staat.teller + 1 })
}

handleDecrement = () => {
deze.setState({ count: dit.staat.count – 1 })
deze.setState({ count: dit.staat.count – 1 })
deze.setState({ count: dit.staat.count – 1 })
}

Als u codering langs bij je thuis zou worden verrast om te vinden dat niet werkt.

De bovenstaande code fragment is gelijk aan:

– Object.toewijzen(
{},
{ count: dit.staat.teller + 1 },
{ count: dit.staat.teller + 1 },
{ count: dit.staat.teller + 1 },
)

– Object.toewijzen() wordt gebruikt om gegevens te kopiëren van een bronobject naar een doelobject. Als de gegevens die worden gekopieerd van de bron naar het doel hebben allemaal dezelfde toetsen, zoals in ons voorbeeld, de laatste object wint. Hier is een eenvoudigere versie van hoe het Object.toewijzen() werkt;

laat count = 3

const object=.toewijzen({},
{count: aantal + 1},
{count: aantal + 2},
{count: aantal + 3}
);

console.log(object);
// output: Object { count: 6 }

Dus in plaats van de oproep gebeurt drie keer, het gebeurt maar een keer. Dit kan opgelost worden door het passeren van een functie te setState(). Net zoals je langs objecten te setState(), kunt u ook doorgeven functies, en dat is de weg uit de situatie hierboven.

Als we bewerken de handleIncrement functie er als volgt uitzien:

handleIncrement = () => {
deze.setState((prevState) => ({ count: prevState.teller + 1 }))
deze.setState((prevState) => ({ count: prevState.teller + 1 }))
deze.setState((prevState) => ({ count: prevState.teller + 1 }))
}

…we kunnen nu increment tellen drie keer met één klik.

In dit geval, in plaats van samenvoegen, Reageren wachtrijen voor de functie-oproepen in de volgorde waarin ze zijn gemaakt en updates van de hele staat degene die het gedaan wordt. Deze updates van de status van tellen tot en met 3 in plaats van 1.

Toegang Vorige Staat Met De Updater

Bij het bouwen van Reageren toepassingen, er zijn tijden wanneer je wilt berekenen staat op basis van de component van de vorige staat. Je kan niet altijd vertrouwen.staat om te houden van de juiste status onmiddellijk na het bellen setState(), het is altijd gelijk aan de staat weergegeven op het scherm.

Laten we terug gaan naar onze teller voorbeeld om te zien hoe dit werkt. Laten we zeggen dat we een functie die hiermee onze teller met 1. Deze functie ziet er zo uit:

changeCount = () => {
deze.setState({ count: dit.staat.count – 1})
}

Wat we willen is de mogelijkheid voor het verlagen van 3. De changeCount() functie is de zogenaamde drie keer in een functie die zorgt voor de gebeurtenis click, zoals deze.

handleDecrement = () => {
deze.changeCount()
deze.changeCount()
deze.changeCount()
}

Elke keer dat de knop om te verlagen wordt geklikt, wordt de teller met 1 verminderd in plaats van 3. Dit komt omdat de deze.staat.tellen niet bijgewerkt te krijgen tot de component is opnieuw gerenderd. De oplossing is om een updater. Een updater kunt u toegang krijgen tot de huidige staat en zet het direct gebruiken voor het bijwerken van andere items. Dus de changeCount() functie zal uitzien.

changeCount = () => {
deze.setState((prevState) => {
terug { count: prevState.count – 1}
})
}

Nu zijn we niet afhankelijk van het resultaat van deze.staat. De staten van graaf zijn gebouwd op elkaar, zodat we in staat zijn om de juiste staat van die verandert met elke oproep naar changeCount().

setState() moet worden behandeld asynchroon — in andere woorden, niet altijd verwachten dat de status heeft veranderd na het aanroepen van setState().

Inpakken

Bij het werken met setState(), dit zijn de belangrijkste dingen die je moet weten:

  • Update van een component staat moet worden gedaan met behulp van setState()
  • Je kan een object of een functie te setState()
  • Pas een functie als je kunt om de update staat meerdere keren
  • Niet afhankelijk zijn van deze.staat onmiddellijk na het bellen setState() van het updater-functie voor in de plaats.