Crearea stărilor la nivel global poate încetini performanța aplicației dvs. Aflați cum puteți crea și utiliza în mod eficient stări în aplicația dvs. React.

Dacă ați scris mult cod React, sunt șanse să fi folosit incorect starea. O greșeală comună pe care o fac mulți dezvoltatori React este stocarea stărilor la nivel global în aplicație, în loc să le stocheze în componentele în care sunt utilizate.

Aflați cum vă puteți refactoriza codul pentru a utiliza statul local și de ce este întotdeauna o idee bună.

Exemplu de bază de stare în React

Iată o foarte aplicație simplă de contor care exemplifica modul în care starea este de obicei gestionată în React:

import {useState} din'reacţiona'
import {Tejghea} din'tejghea'
funcţieApp(){
const [număr, setCount] = useState(0)
întoarcere<Tejgheanumara={numara}setCount={setCount} />
}
exportMod implicit App

Pe liniile 1 și 2, importați useState() cârlig pentru crearea statului, și Tejghea componentă. Tu definești numara stat şi setCount metoda de actualizare a starii. Apoi le treci pe amândouă la Tejghea componentă.

instagram viewer

The Tejghea componenta redă apoi numara și apeluri setCount pentru a crește și a reduce numărul.

funcţieTejghea({count, setCount}) {
întoarcere (

Nu ai definit numara variabilă şi setCount funcţionează local în interiorul Tejghea componentă. Mai degrabă, l-ați transmis din componenta părinte (App). Cu alte cuvinte, utilizați o stare globală.

Problema cu statele globale

Problema cu utilizarea unei stări globale este că stocați starea într-o componentă părinte (sau părinte al unui părinte) și apoi dându-l drept recuzită la componenta în care acea stare este de fapt necesară.

Uneori, acest lucru este bine atunci când aveți o stare care este partajată între o mulțime de componente. Dar în acest caz, nicio altă componentă nu îi pasă de numara stat cu excepția Tejghea componentă. Prin urmare, este mai bine să mutați statul în Tejghea componenta în care este utilizată efectiv.

Mutarea statului la componenta copil

Când mutați statul în Tejghea componentă, ar arăta astfel:

import {useState} din'reacţiona'
funcţieTejghea() {
const [număr, setCount] = useState(0)
întoarcere (

Apoi în interiorul tău App componentă, nu trebuie să transmiteți nimic la Tejghea componenta:

// importuri
funcţieApp(){
întoarcere<Tejghea />
}

Contorul va funcționa exact la fel ca înainte, dar marea diferență este că toate statele dvs. sunt local în interiorul acestuia. Tejghea componentă. Deci, dacă trebuie să aveți un alt contor pe pagina principală, atunci ați avea două contoare independente. Fiecare contor este autonom și are grijă de toate stările sale.

Starea de manipulare în aplicații mai complexe

O altă situație în care ați folosi o stare globală este cu formularele. The App componenta de mai jos transmite datele formularului (e-mail și parola) și metoda de setare către Formular de autentificare componentă.

import { useState } din"reacţiona";
import { LoginForm } din„./LoginForm”;
funcţieApp() {
const [formData, setFormData] = useState({
 e-mail: "",
 parola: "",
 });


funcţieupdateFormData(date noi) {
 setFormData((prev) => {
întoarcere { ...prev, ...newData };
 });
 }


funcţieonSubmit() {
consolă.log (formData);
 }
întoarcere (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

The Formular de autentificare componenta preia informațiile de conectare și le redă. Când trimiteți formularul, acesta apelează updateData funcție care este transmisă și de la componenta părinte.

funcţieFormular de autentificare({ onSubmit, data, updateData }) {
funcţiehandleSubmit(e) {
 e.preventDefault();
 onSubmit();
 }
întoarcere (

Mai degrabă decât gestionarea statului pe componenta părinte, este mai bine să mutați statul în LoginForm.js, unde veți folosi codul. Acest lucru face ca fiecare componentă să fie autonomă și să nu se bazeze pe o altă componentă (adică părintele) pentru date. Iată versiunea modificată a Formular de autentificare:

import { useRef } din"reacţiona";
funcţieFormular de autentificare({ onSubmit }) {
const emailRef = useRef();
const parolaRef = useRef();

funcţiehandleSubmit(e) {
 e.preventDefault();
 onSubmit({
 e-mail: emailRef.current.value,
 parola: passwordRef.current.value,
 });
 }
întoarcere (

Aici legați intrarea la o variabilă folosind ref atributele și utilizareRef Reacționează cârlig, în loc să treci direct metodele de actualizare. Acest lucru vă ajută să eliminați codul verbos și optimizați performanța formularului folosind cârligul useRef.

În componenta părinte (App.js), puteți elimina atât starea globală, cât și updateFormData() metoda pentru ca nu mai ai nevoie de ea. Singura funcție rămasă este onSubmit(), pe care îl invoci din interiorul Formular de autentificare componentă pentru a înregistra detaliile de conectare pe consolă.

funcţieApp() {
funcţieonSubmit(formData) {
consolă.log (formData);
 }
întoarcere (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Nu numai că ți-ai făcut statul cât mai local posibil, dar ai eliminat de fapt nevoia oricărei stări (și ai folosit refs in schimb). Deci dvs App componenta a devenit semnificativ mai simplă (având o singură funcție).

Ta Formular de autentificare De asemenea, componenta a devenit mai simplă, deoarece nu trebuia să vă faceți griji cu privire la actualizarea stării. Mai degrabă, ține evidența a două refs, si asta e.

Gestionarea stării partajate

Există o problemă cu abordarea încercării de a face statul cât mai local posibil. Te-ai întâlni adesea în scenarii în care componenta părinte nu folosește starea, dar o transmite mai multor componente.

Un exemplu este a avea o TodoContainer componentă părinte cu două componente secundare: TodoList și TodoCount.

funcţieTodoContainer() {
const [todos, setTodos] = useState([])
întoarcere (
 <>


 </>
 )
}

Ambele componente secundare necesită toate stat, deci TodoContainer le transmite la amândoi. În scenarii ca acestea, trebuie să faci statul cât mai local posibil. În exemplul de mai sus, punându-l în interiorul TodosContainer este cât se poate de local.

Dacă ar fi să pui această stare în tine App componentă, nu ar fi cât mai local posibil pentru că nu este cel mai apropiat părinte de cele două componente care au nevoie de date.

Pentru aplicații mari, gestionarea statului doar cu useState() cârligul se poate dovedi dificil. În astfel de cazuri, poate fi necesar să optați pentru API-ul React Context sau Reacționează Redux pentru a gestiona eficient statul.

Aflați mai multe despre React Hooks

Cârligele formează fundația React. Folosind cârlige în React, puteți evita să scrieți cod lung care altfel ar folosi clase. Cârligul useState() este, fără îndoială, cel mai des folosit cârlig React, dar există multe altele, cum ar fi useEffect(), useRef() și useContext().

Dacă doriți să deveniți expert în dezvoltarea de aplicații cu React, atunci trebuie să știți cum să utilizați aceste cârlige în aplicația dvs.