Change language
Python.Engineering Wiki setstate in javascript

setstate in javascript

__del__ | __main__ Python module | array Python module | code Python module | COM PHP module | copy Python module | dis Python module | DOM PHP module | Ev PHP module | FFI PHP module | gc Python module | html Python module | http Python module | imp Python module | io Python module | JavaScript | keyword Python module | operator Python module | os Python module | PS PHP module | pty Python module | Python functions | re Python module | resource Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | time Python module | types Python module | UI PHP module
Michael Zippo Michael Zippo

Het volgen van de status van een applicatie is hoe een Single Page Application (SAP) wijzigingen vastlegt en deze aan de gebruiker rapporteert. In tegenstelling tot een sjabloonframework, view, controller (MVC), leidt SAP de gebruiker niet om en heeft daarom een manier nodig om aanstaande wijzigingen aan de clientzijde te beheren. Raadpleeg deze -gids om MVC-frameworks te bekijken.

In React kunnen componenten zelf hun eigen status aan en dienovereenkomstig opnieuw spawnen. Dit gebeurt door middel van levenscyclusmethoden, die hier uitgebreid worden besproken. Voor de doeleinden van dit artikel zullen we bekijken hoe je toestanden kunt wijzigen met setState.

In deze handleiding wordt verondersteld dat je enigszins bekend bent met React. Om de basisprincipes van React te bekijken of te leren, bevat dit artikel enkele van de beste leermiddelen van React.

Wat is React setState?

De React setState-methode is als het veranderen van de status van een component met stabiliteit. Er zijn een paar specifieke regels voor het wijzigen van de status in React.

  1. setState kan niet worden aangeroepen in een klassecomponent. De componenten van de klasse roepen de constructor () -methode aan en stellen deze in op een beginstatus. Vervolgens kunnen we de status verderop wijzigen door setState aan te roepen.
    Er zijn twee verschillende soorten componenten in React. Het is de functionele component en de klassencomponent. Voor onze doeleinden praten we alleen met de componenten van de klas. Voor een meer diepgaande blik op dit     artikel over de verschillen tussen functionele en klasse componenten.
  2. Door setState alleen aan te roepen in een klassecomponent, kunnen we rechtstreeks naar de component zelf verwijzen met het trefwoord this. Het aanroepen van this.setState () is de beste werkwijze en zorgt ervoor dat uw code niet breekt.
  3. Wijzig de status niet rechtstreeks. Directe statusverandering wordt niet geregistreerd bij Reageren op spawnen. Het hele punt van statusverandering is om een nieuwe interpretatie van dat onderdeel te activeren om de wijzigingen weer te geven die aan de gebruiker zijn aangebracht.

Laten we nu eens kijken naar de syntaxis in de context van deze richtlijnen.

setState React-syntaxis

Vanaf de eerste richtlijn zie je dat we setState alleen kunnen gebruiken binnen een klascomponent. Stel dat je bijvoorbeeld een zakelijke app hebt en een winkelwagentje wilt implementeren. We zouden een klascomponent met de naam winkelwagen kunnen instellen. Dit onderdeel is verantwoordelijk voor het beheren van zijn eigen status wanneer een gebruiker een artikel aan zijn winkelwagentje toevoegt.

Door de bovenstaande code op te splitsen, declareren we de Cart class component Zoals alle klassencomponenten, verlengen we de reactie .Component. Dit is de standaard React-syntaxis.

Omdat we een status aan dit deelvenster willen geven, moeten we de constructormethode aanroepen. Daarom wordt de basisconstructor aangeroepen met super (props). Je kunt zien dat de basisbouwer niet wordt aangeroepen met rekwisieten. De officiële React-documentatie vraagt dat de basisconstructormethode altijd wordt aangeroepen met props

Nu we de noodzakelijke React-syntaxis hebben doorlopen om een klassecomponent te bouwen om de status te behouden, zijn we klaar om onze initiële status te beïnvloeden. Dit is de enige keer dat we rechtstreeks naar de status kunnen verwijzen. Status toewijzen door door this.state = aan te roepen. {ShoppingCart: []} kunnen we de beginstatus van onze winkelwagen instellen op een lege array <

h2> Reageer voorbeeld setState

in de vorige sectie hebben we de syntaxis onderzocht die betrokken is bij het declareren van een initiële status. Zodra de status is ingesteld in de constructormethode, kunnen we zoals gewoonlijk renderen:

Uw winkelwagen

); }} ReactDOM.render (, document.getElementById (`root`));

Hier hebben we een klassencomponent met zijn initiële statusset en het toont de mand in de retourdeclaratie van de rendermethode. Laten we eens kijken hoe we setState kunnen gebruiken om onze winkelwagen bij te werken.

We definiëren een functie die een nieuw item aan onze winkelwagen toevoegt terwijl de eerder toegevoegde items behouden blijven. gebruik de operator JavaScript-diffusie (.. .) om een kopie te maken van de oorspronkelijke staat en deze te actualiseren met de nieuwe staat. winkelwagen zal alle toegevoegde elementen bevatten.

de addItem-functie kan worden gebruikt in het onClick React-attribuut van een knop als we willen dat de gebruiker dit item kan toevoegen wanneer een knop klikt Voor onze doeleinden, zie Hoe setState te gebruiken in een deel van een functie is voldoende cient.

Dit artikel is bedoeld als inleiding tot het gebruik van setState en is zeker niet uitputtend.

Conclusie

In dit artikel hebben we geleerd wat setState is, richtlijnen over hoe het te gebruiken, syntaxis en een kort voorbeeld. Dit wordt verondersteld een artikelbasis te zijn om u aan te moedigen dieper te graven en de praktijk om een staat van de componenten die u gebruikt, bij te werken

officiële React-documentatie bevat aanvullende voorbeelden die meer oefenmogelijkheden bieden. Onthoud - u dat bij de toepassing van een enkele pagina, het volgen van de status van een component essentieel is om wijzigingen aan de gebruiker aan te brengen.