React.js este una dintre cele mai utilizate biblioteci JavaScript pe care orice dezvoltator front-end ar trebui să le cunoască. Înțelegerea a ceea ce este recuzita și starea și diferențele dintre ele este un mare pas către învățarea React.

În această postare pe blog, voi explica ce sunt recuzita și starea și voi clarifica, de asemenea, câteva dintre cele mai întrebat întrebări despre ele:

  • Ce sunt recuzita?
  • Cum transmiteți date cu recuzită?
  • Ce este statul?
  • Cum actualizați starea unei componente?
  • Ce se întâmplă când starea se schimbă?
  • Pot folosi starea în fiecare componentă?
  • Care sunt diferențele dintre recuzită și stare?

Dacă sunteți un începător complet la React, am o serie de tutoriale despre Reacționează pentru începători.

Ce sunt recuzita?

Accesoriile sunt prescurtate pentru proprietăți și sunt folosite pentru a transmite date între componentele React. Fluxul de date al React între componente este unidirecțional (numai de la părinte la copil).

Cum transmiteți date cu recuzită?

Iată un exemplu despre modul în care datele pot fi transmise folosind elemente de recuzită:

class ParentComponent extends Component {    
    render() {    
        return (        
            <ChildComponent name="First Child" />    
        );  
    }
}

const ChildComponent = (props) => {    
    return <p>{props.name}</p>; 
};
Citește mai multCum se face o promisiune dintr-o funcție de apel invers în JavaScript

În primul rând, trebuie să definim / să obținem niște date de la componenta părinte și să le atribuim atributului „prop” al unei componente copil.

<ChildComponent name="First Child" />

„Nume” este un element definit aici și conține date text. Apoi, putem transmite date cu elemente de recuzită, ca și cum am argumenta o funcție:

const ChildComponent = (props) => {  
  // statements
};

Și, în cele din urmă, folosim notația punct pentru a accesa datele de prop și le redăm:

return <p>{props.name}</p>;

De asemenea, puteți viziona videoclipul meu pentru a vedea cum să folosiți recuzita:

Ce este statul?

React are un alt obiect încorporat special numit state, care permite componentelor să creeze și să gestioneze propriile date. Deci, spre deosebire de recuzită, componentele nu pot transmite date cu stare, dar pot să le creeze și să le gestioneze intern.

Citește mai multCum se generează un fișier de reducere GitHub din Microsoft Word utilizând TypeScript

Iată un exemplu care arată cum se folosește starea:

class Test extends React.Component {    
    constructor() {    
        this.state = {      
            id: 1,      
            name: "test"    
        };  
    }    
    
    render() {    
        return (      
            <div>        
              <p>{this.state.id}</p>        
              <p>{this.state.name}</p>      
            </div>    
        );  
    }
}

Cum actualizați starea unei componente?

Starea nu trebuie modificată direct, dar poate fi modificată cu o metodă specială numită setState( ).

this.state.id = “2020”; // wrong

this.setState({         // correct  
    id: "2020"
});

Ce se întâmplă atunci când starea se schimbă?

OK, de ce trebuie să folosim setState( )? De ce avem nevoie chiar de obiectul de stat în sine? Dacă puneți aceste întrebări, nu vă faceți griji – veți înțelege starea în curând 🙂 Lasă-mă să răspund.

O schimbare a stării are loc pe baza introducerii de către utilizator, a declanșării unui eveniment și așa mai departe. De asemenea, componentele React (cu stare) sunt redate pe baza datelor din stare. Statul deține informațiile inițiale.

Deci, când starea se schimbă, React este informat și redă imediat DOM-ul – nu întregul DOM, ci doar componenta cu starea actualizată. Acesta este unul dintre motivele pentru care React este rapid.

Citește mai multAutentificare utilizând Google în ASP.NET Core 2.0

Și cum se notifică React? Ai ghicit: cu setState( ). setState( ) metoda declanșează procesul de redare pentru piesele actualizate. React este informat, știe ce părți trebuie schimbate și o face rapid fără a reda întregul DOM.

În rezumat, există 2 puncte importante la care trebuie să fim atenți atunci când folosim statul:

  • Statul nu ar trebui modificat direct – setState( ) ar trebui folosit
  • Starea afectează performanța aplicației dvs. și, prin urmare, nu ar trebui folosită inutil

Pot folosi starea în fiecare componentă?

O altă întrebare importantă pe care s-ar putea să o puneți despre stat este exact unde o putem folosi. În primele zile, starea putea fi utilizată numai în componentele clasei, nu în componentele funcționale.

De aceea, componentele funcționale erau cunoscute și sub denumirea de componente fără stare. Cu toate acestea, după introducerea React Hooks, starea poate fi utilizată acum atât în ​​clasă, cât și în componente funcționale.

Dacă proiectul dvs. nu folosește React Hooks, atunci puteți utiliza numai componentele de stare din clasă.

Care sunt diferențele dintre recuzită și stare?

În cele din urmă, să recapitulăm și să vedem principalele diferențe dintre recuzită și stare:

  • Componentele primesc date din exterior cu accesorii, în timp ce își pot crea și gestiona propriile date cu starea
  • Accesoriile sunt folosite pentru a transmite date, în timp ce starea este pentru gestionarea datelor
  • Datele din recuzită sunt doar în citire și nu pot fi modificate de o componentă care le primește din exterior
  • Datele de stat pot fi modificate prin propria componentă, dar sunt private (nu pot fi accesate din exterior)
  • Accesoriile pot fi transmise doar de la componenta părinte la copil (flux unidirecțional)
  • Modificarea stării ar trebui să aibă loc cu setState ( ) metodă

React.js este una dintre cele mai utilizate biblioteci JavaScript pe care fiecare dezvoltator front-end ar trebui să le cunoască.

Sper că acest articol vă va ajuta să înțelegeți recuzita și starea. Există, de asemenea, alte lucruri importante de acoperit despre React și voi continua să scriu despre ele mai târziu în articolele mele următoare.

Dacă doriți să aflați mai multe despre dezvoltarea web, nu ezitați urmărește-mă pe Youtube!

Mulțumesc că ai citit!