Javascript-status

Michael Zippo

Heb je ooit gehoord van State in de React JavaScript-bibliotheek, maar weet je niet hoe je het moet gebruiken? State verwijst naar "de manier waarop elk object op een webpagina verschijnt". " Het concept is eenvoudig - het is een verzameling gegevens over de huidige staat van het onderdeel, die kunnen worden gewijzigd door de beschreven gegevens aan te passen. Telkens wanneer de gegevens veranderen, worden deze opnieuw weergegeven op het computerscherm. Het moeilijkste deel van de toestand is weten hoe en wanneer je het moet gebruiken. Maar maak je geen zorgen, want in deze tutorial wordt uitgelegd hoe de status wordt gebruikt.

Om je een snel overzicht te geven, gebruik je this.state om de beginstatus in te stellen. in een JavaScript-constructor. Gebruik de setState-methode om de status bij te werken. In deze zelfstudie zullen we meer hebben over de status en de gebruikswijzen.

Wat is React State?

React state is een object met een set eigenschappen die zijn toegewezen aan een component en dit helpt bij de manier waarop de component wordt weergegeven. Een component met state wordt stateful genoemd. U gebruikt dit meestal als een component informatie erover moet bijhouden tussen merken.

Een voorbeeld is een "vind ik leuk"-knopcomponent die het aantal moet bijhouden vaak klikt het. Dit zou elke keer dat de knop wordt ingedrukt opnieuw op het scherm moeten verschijnen, alsof het bijgewerkte aantal vind-ik-leuks wordt weergegeven. En daarvoor moeten we ervoor zorgen dat de knopachtige component de informatie volgt, in plaats van de informatie waarmee we gecodeerd hebben steeds opnieuw te herhalen. Deze mensen wil je tenslotte niet missen.

De statusgegevens van een component zijn via this.state te benaderen en te bewerken met de .setState methode. De status is privé omdat deze niet kan worden gewijzigd door de component die de status bevat

Veel mensen verwarren status met accessoires, een ander object van de reactie, maar er zijn belangrijke verschillen tussen de twee. Een daarvan is dat de toestand dynamisch is, wat betekent dat de gegevens die erin staan kunnen veranderen en zo het gedrag van de component kunnen beïnvloeden. Props, aan de andere kant, zijn onveranderlijk, wat betekent dat "de staat niet kan veranderen nadat het is gebouwd. "

React State Syntax

de status wordt aanvankelijk gedefinieerd in de functie genaamd constructor. status kan veranderen, willen we u verzekeren dat er een initiële huidige waarde is. Het algemene formaat voor het instellen van de status is:

Bijvoorbeeld , als u een timercomponent maakt, moet u de startstatus instellen als this.state = {0} seconds:. U weet dat een timer elke seconde van status verandert, maar hij moet beginnen te tellen ergens. De component waarin u codeert, wordt "this" genoemd. Deze instructie wijzigt de status van de component door een van zijn attributen ("seconden") in te stellen op de waarde die u kiest (in dit geval "0") set.

Hier is een component met de naam "persoon" record van een steekproef. We zullen vier waarden - naam, beroep, haar en leeftijd - toevoegen aan het statusobject in de component:

// basic React statement import

// componenten die we "Persoon" hebben genoemd, met eigenschappen van de staat gedefinieerd in de constructor:

// Een renderfunctie die bepaalt wat er op het scherm wordt weergegeven:

persoon

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

De laatste regel geeft aan dat de code door uw HTML-document gaat en zoekt naar het element met de id "root", en doet wat u hem hebt opgedragen in de render () methode hierboven. Daarom moet u het volgende toevoegen aan de hoofdtekst van uw index.html-bestand:

Deze HTML-tag heeft het volledige ID-kenmerk op "root". Dit is waar je de component hebt gevraagd om te renderen.

Je kunt verwijzen naar het statusobject door this.state.attributeName te typen. Dit zal "attribuutnaam" vervangen door de gedefinieerde attributen.

Hier is een voorbeeld dat de eigenschappen gebruikt die we eerder hebben gedefinieerd om de status van onze "Persoon"-component te creëren. We gebruiken de vorm {} this.state.attribute om de attribuutwaarde aan te roepen van de component waarin we onze code schrijven.

In dit geval zullen we de volgende methode kopiëren naar onze "person"-component, die dit dat "dat" verwijst. Het scherm toont de waarde die hoort bij het attribuut dat we hebben geschreven. Vervang de render ()-declaratie van onze "Persoon"-component in het laatste voorbeeld door dit:

{this.state.name}

{{this.state.name} is that.state.occupation} en het is {} this.state.age years Momenteel is haar haar {this.state.hair}

Het scherm toont een koptekst met de waarde van de `name`-attribuut, dat is Tom Hiddleston. Hieronder staat een alinea waarin staat: "Tom Hiddleston is een acteur en hij is 40 jaar oud." Haar haar is zwart. "

.setState () gebruikt this.setState () om de waarden van een statusobject bij te werken. Deze methode heeft één argument nodig. be a new attribuut en zijn waarde: {attribute: "new value" }. methoden worden gebruikt om dit te doen omdat React de render methode achter de schermen zal aanroepen, zodat je nieuwe inhoud altijd wordt weergegeven.

Hier is een voorbeeld van het gebruik van onze "person" component van eerder. Voeg de volgende code toe aan de "person" code component die we aan het begin van het artikel zagen.

Javascript-status

Wat is React State?

React State Syntax

persoon

{this.state.name}

De

Moet je state gebruiken?

Conclusie