Javascript-status

| | | | | | | | |

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. "

De

.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.

  1. Toevoegen een functie voor het wijzigen van de bezetting naar "persoon" in de body class. Deze functie roept de methode .setState aan. het hier geschreven kenmerk is het bezettingsattribuut en we schrijven de waarde die we willen veranderen. herinnering "persoon " componentcode die taak is momenteel
    job = () => {this.setState ({occupation "model"});} "actor".
  2. Voeg de volgende keycode in de .render () hoofdmethode a>

    meerdere .setState () worden niet op volgorde verwerkt, dus dit kan aanwezig zijn meer over deze - conflict waarvan u op de hoogte moet zijn . Dit is belangrijk omdat uw code voorbij is groot en er zijn meer regels en meer React geschreven toestanden, je moet nadenken over hoe ze samenwerken. Dit kan moeilijk zijn om te doen, vooral omdat React asynchroon van aard is, waar je niet kunt voorspellen wie je setstate-methoden bestuurt te verwerken.

    Moet je state gebruiken?

    Het antwoord is simpel: nee, dat zou niet moeten. Er zijn twee hoofdtypen componenten: Reageer componenten functioneel en klasse componenten. Stateless componenten zijn functionele componenten. Per ongeluk was er geen status in een component - u moet deze zelf maken

    Stateless, uw applicatie zal echter niet erg interactief zijn .. Zelfs als u kiest voor instelling staatswerk, is het raadzaam om niet overijverig te zijn in het gebruik ervan, omdat overmatig gebruik van staat in componenten kan maken het moeilijk om mogelijke conflicten te voorspellen vanwege de complexiteit.

    Conclusie

    Status en Props zijn twee belangrijke objecten om in gedachten te houden bij het gebruik van React. Status volgt de huidige status van een component terwijl deze verandert op basis van bijgewerkte gegevens die een status definiëren. De accessoires daarentegen veranderen niet. Een eenvoudige vuistregel die u kunt gebruiken, is de vraag: "Worden de kenmerken van dit onderdeel op enig moment gewijzigd?" ". Als het antwoord "ja" is, dan wil je de statuscategorie gebruiken, aangezien Props onveranderlijk is.

    Voordat je jezelf volledig onderdompelt in Reageer , zorg ervoor dat u bekend bent met JavaScript ES6, zoals React VEELZIJDIG van zijn functies, zoals richtingsfuncties, klassen en soorten variabelen. Daarnaast zijn er wijzigingen aangebracht in het gebruik van React wat betreft de status en andere functies zonder dat er een klasse hoeft te worden geschreven in de recente releasedag React, reactiehaken .

    Javascript-status __del__: Questions

    Javascript-status __dict__: Questions

    Shop

    Best Python online courses for 2022

    $

    Best laptop for Fortnite

    $

    Best laptop for Excel

    $

    Best laptop for Solidworks

    $

    Best laptop for Roblox

    $

    Best computer for crypto mining

    $

    Best laptop for Sims 4

    $

    Best laptop for Zoom

    $499

    Latest questions

    NUMPYNUMPY

    psycopg2: insert multiple rows with one query

    12 answers

    NUMPYNUMPY

    How to convert Nonetype to int or string?

    12 answers

    NUMPYNUMPY

    How to specify multiple return types using type-hints

    12 answers

    NUMPYNUMPY

    Javascript Error: IPython is not defined in JupyterLab

    12 answers

    Wiki

    Python OpenCV | cv2.putText () method

    numpy.arctan2 () in Python

    Python | os.path.realpath () method

    Python OpenCV | cv2.circle () method

    Python OpenCV cv2.cvtColor () method

    Python - Move item to the end of the list

    time.perf_counter () function in Python

    Check if one list is a subset of another in Python

    Python os.path.join () method