Als u de statussen wereldwijd maakt, kan dit de prestaties van uw app vertragen. Leer hoe u effectief staten kunt maken en gebruiken in uw React-toepassing.

Als je veel React-code hebt geschreven, is de kans groot dat je state verkeerd hebt gebruikt. Een veelgemaakte fout die veel React-ontwikkelaars maken, is het globaal opslaan van statussen in de applicatie, in plaats van ze op te slaan in de componenten waarin ze worden gebruikt.

Ontdek hoe u uw code kunt herstructureren om de lokale staat te gebruiken en waarom dit altijd een goed idee is.

Basisvoorbeeld van State in React

Hier is een zeer eenvoudige tegentoepassing dat illustreert hoe de status doorgaans wordt afgehandeld in React:

importeren {useState} van'Reageer'
importeren {Balie} van'balie'
functieapp(){
const [telling, setCount] = useState(0)
opbrengst<Baliegraaf={graaf}setCount={setCount} />
}
exporterenstandaard app

Op regel 1 en 2 importeert u de gebruikState() haak voor het maken van de staat, en de Balie bestanddeel. U definieert de

instagram viewer
graaf staat en setCount methode om de status bij te werken. Vervolgens geef je beide door aan de Balie bestanddeel.

De Balie component geeft dan de graaf en roept setCount om de telling te verhogen en te verlagen.

functieBalie({tel, setCount}) {
opbrengst (

Je definieerde niet de graaf variabel en setCount lokaal functioneren binnen de Balie bestanddeel. In plaats daarvan heb je het doorgegeven vanuit de bovenliggende component (app). Met andere woorden, u gebruikt een globale staat.

Het probleem met mondiale staten

Het probleem met het gebruik van een globale status is dat u de status opslaat in een oudercomponent (of bovenliggende component van een bovenliggende component) en vervolgens doorgeven als rekwisieten naar het onderdeel waar die status daadwerkelijk nodig is.

Soms is dit prima als je een status hebt die over veel componenten wordt gedeeld. Maar in dit geval geeft geen enkel ander onderdeel om de graaf staat behalve de Balie bestanddeel. Daarom is het beter om de staat te verplaatsen naar de Balie onderdeel waar het daadwerkelijk wordt gebruikt.

De staat verplaatsen naar de onderliggende component

Wanneer u de staat verplaatst naar de Balie onderdeel, ziet het er zo uit:

importeren {useState} van'Reageer'
functieBalie() {
const [telling, setCount] = useState(0)
opbrengst (

Dan in je app component hoeft u niets door te geven aan de Balie bestanddeel:

// invoer
functieapp(){
opbrengst<Balie />
}

De teller werkt precies hetzelfde als voorheen, maar het grote verschil is dat al je staten zich hier lokaal in bevinden Balie bestanddeel. Dus als je een andere teller op de startpagina nodig hebt, dan heb je twee onafhankelijke tellers. Elke teller is op zichzelf staand en zorgt voor al zijn eigen status.

Omgaan met status in complexere toepassingen

Een andere situatie waarin u een globale status zou gebruiken, is met formulieren. De app component hieronder geeft de formuliergegevens (e-mail en wachtwoord) en de setter-methode door aan de Login formulier bestanddeel.

importeren { useState } van"Reageer";
importeren { Login formulier } van"./Login formulier";
functieapp() {
const [formData, setFormData] = useState({
 e-mail: "",
 wachtwoord: "",
 });


functieupdateFormData(nieuwe data) {
 setFormData((vorige) => {
opbrengst { ...prev, ...newData };
 });
 }


functieopIndienen() {
troosten.log (formData);
 }
opbrengst (
 gegevens={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

De Login formulier component neemt de inloggegevens op en geeft deze weer. Wanneer u het formulier indient, roept het de gegevens bijwerken functie die ook wordt doorgegeven vanuit de bovenliggende component.

functieLogin formulier({ onSubmit, data, updateData }) {
functiehandvatVerzenden(e) {
 e.preventDefault();
 opSubmit();
 }
opbrengst (

In plaats van de status van de bovenliggende component te beheren, is het beter om de status naar te verplaatsen LoginForm.js, waar u de code gebruikt. Hierdoor wordt elke component op zichzelf staand en niet afhankelijk van een andere component (d.w.z. de ouder) voor gegevens. Hier is de aangepaste versie van de Login formulier:

importeren { gebruikRef } van"Reageer";
functieLogin formulier({ onSubmit }) {
const emailRef = gebruikRef();
const wachtwoordRef = gebruikRef();

functiehandvatVerzenden(e) {
 e.preventDefault();
 opIndienen({
 e-mail: emailRef.huidige.waarde,
 wachtwoord: wachtwoordRef.huidige.waarde,
 });
 }
opbrengst (

Hier bindt u de invoer aan een variabele met behulp van ref attributen en de gebruikRef Reageer hook, in plaats van de updatemethoden direct door te geven. Dit helpt u bij het verwijderen van uitgebreide code en optimaliseer de formulierprestaties met behulp van de useRef-hook.

In de bovenliggende component (App.js), kunt u zowel de globale status als verwijderen updateFormData() methode omdat u deze niet meer nodig heeft. De enige functie die overblijft is opSubmit(), die u aanroept vanuit de Login formulier component om de inloggegevens op de console te loggen.

functieapp() {
functieopIndienen(formulierGegevens) {
troosten.log (formData);
 }
opbrengst (
 gegevens={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Je hebt niet alleen je staat zo lokaal mogelijk gemaakt, maar je hebt zelfs de behoefte aan een staat helemaal weggenomen (en gebruikt scheidsrechters in plaats van). Dus jouw app component is aanzienlijk eenvoudiger geworden (met slechts één functie).

Jouw Login formulier component werd ook eenvoudiger omdat u zich geen zorgen hoefde te maken over het bijwerken van de status. In plaats daarvan houd je er gewoon twee bij scheidsrechters, en dat is het.

Omgaan met gedeelde status

Er is één probleem met de aanpak om de staat zo lokaal mogelijk te maken. U komt vaak scenario's tegen waarbij de bovenliggende component de status niet gebruikt, maar deze doorgeeft aan meerdere componenten.

Een voorbeeld is het hebben van een TodoContainer bovenliggende component met twee onderliggende componenten: Te doen lijst En TodoCount.

functieTodoContainer() {
const [todos, setTodos] = useState([])
opbrengst (
 <>


 </>
 )
}

Beide onderliggende componenten vereisen de taken staat, dus TodoContainer geeft het door aan beiden. In scenario's als deze moet je de staat zo lokaal mogelijk maken. In het bovenstaande voorbeeld plaatst u het in de TodosContainer is zo lokaal als je kunt krijgen.

Als je deze staat in je zou zetten app component, zou het niet zo lokaal mogelijk zijn omdat het niet de dichtstbijzijnde ouder is van de twee componenten die de gegevens nodig hebben.

Voor grote toepassingen beheert u de status alleen met de gebruikState() haak kan moeilijk blijken te zijn. In dergelijke gevallen moet u mogelijk kiezen voor de React Context-API of Reageer Redux om de staat effectief te besturen.

Meer informatie over React Hooks

Hooks vormen de basis van React. Door hooks in React te gebruiken, kunt u voorkomen dat u lange code hoeft te schrijven die anders klassen zou gebruiken. De useState() hook is ongetwijfeld de meest gebruikte React hook, maar er zijn er nog veel meer, zoals useEffect(), useRef() en useContext().

Als u bekwaam wilt worden in het ontwikkelen van applicaties met React, dan moet u weten hoe u deze hooks in uw applicatie kunt gebruiken.