React este un cadru JavaScript front-end. În timp ce construirea paginilor HTML și gestionarea lor poate deveni plictisitoare, React face lucrurile mai ușoare prin împărțirea elementelor de pe ecran și a logicii lor în componente.

React aduce multe la masă, dar una dintre cele mai utile caracteristici este managementul de stat. În acest articol, veți învăța cum să gestionați starea folosind React Hooks. Înainte de a continua, acest articol presupune că cunoașteți elementele de bază ale React.

Ce sunt cârligele în ReactJS?

Cârligul este un nou concept introdus în React pentru gestionarea stării și a altora caracteristicile lui React. Folosind cârlige în React, puteți evita să scrieți cod lung care altfel ar folosi clase. Următorul exemplu demonstrează un exemplu de useState cârlig.

const [variabilă, setVariable] = useState (valoare inițială);

Aici variabil este statul şi setVariable este funcția care stabilește starea. useState este cârligul care deține valoarea inițială a variabilei de stare. Nu-ți face griji dacă acest lucru nu are sens pentru tine. Până la sfârșitul acestui tutorial, veți avea o înțelegere solidă a cârligelor.

Există două tipuri de cârlige:

• Cârlige de bază
  1. useState
  2. useEffect
  3. foloseșteContext
• Cârlige suplimentare
  1. utilizareRef
  2. foloseșteMemo
  3. utilizați Reducer

useState()

The useState cârlig ajută la gestionarea stării. Mai devreme, în dezvoltarea React, managementul de stat se făcea folosind clase. Sintaxa de stare a fost scrisă în interiorul constructorului și a folosit acest cuvânt cheie. Odată cu introducerea cârligelor React, dezvoltatorii au libertatea de a gestiona starea folosind componente funcționale.

Puteți consulta exemplul anterior pentru sintaxa cârligelor React. Cel mai simplu exemplu de explicat useState() este exemplul de variabilă de numărare:

import {useState} din „react”;
function App() {
const [count, setCount] = useState (0);
întoarcere (


Exemplu de cârlige

{numara}

setCount (count+1)}>Adăugați
setCount (count-1)}>Scădere



);
}

The useState hook are o variabilă și o metodă care este folosită pentru a seta valoarea variabilei. The useState hook acceptă valoarea inițială a stării ca parametru. Puteți seta orice valoare pentru variabila de numărare folosind setCount metodă.

Există două butoane în codul de mai sus pentru a crește și a reduce valoarea numara variabil. În timp ce creșteți, puteți adăuga +1 la starea curentă de numărare și -1 pentru a reduce numărul cu 1.

useEffect

The useEffect hook actualizează starea de pe pagina web după fiecare schimbare a stării. The useEffect Hook a fost introdus pentru a elimina efectele secundare ale componentelor bazate pe clasă. Înainte de introducerea componentelor bazate pe funcții, schimbările de stare au fost urmărite folosind componentele ciclului de viață: componentDidMount și componentDidUpdate. The useEffect hook acceptă o matrice de dependențe. Toate modificările variabilelor de stare menționate în matricea de dependențe sunt urmărite și afișate folosind useEffect cârlig.

Un exemplu clasic de utilizare a useEffect cârlig este preluarea datelor dintr-un API sau calcularea like-urilor sau abonamentelor la o postare.

useEffect(()=>{
// cod
},[matrice de dependență]);

Luând în considerare exemplul de mai sus

import { useState, useEffect } din „react”;
function App() {
const [count, setCount] = useState (0);
useEffect(() => {
document.title = `Ați făcut clic de ${count} ori`;
}, [numara]);
întoarcere (


Exemplu de cârlige

{numara}

 setCount (număr + 1)}>Adăugați



);
}

La trecerea numara variabilă de stare în useEffect matrice de dependențe, verifică dacă starea s-a schimbat sau nu. Apoi setează titlul documentului la variabila de numărare.

foloseșteContext

The foloseșteContext cârligul ajută la trecerea datelor prin componentă fără a o face manual prin elemente de recuzită. Face utilizarea API-ului Context rapid și ușor. Veți avea o mai bună înțelegere după ce treceți printr-un exemplu.

În primul rând, înțelegeți cum arată codul fără a utiliza Context. După cum puteți vedea, trebuie să treceți textul prin recuzită la componenta copil. Pentru a evita complexitățile, puteți utiliza foloseșteContext cârlig.

export funcția implicită App() {
let text = "Bună ziua, bun venit la MUO";
întoarcere (






);
}
const ChildComponent = ({ text }) => {
întoarcere 
{text}
;
};

În primul rând, creați un furnizor în fișierul dvs. principal (App.js).

const Context = React.createContext (null);

The App componenta este componenta de nivel superior sau componenta „părinte”. Trebuie să înfășurați întreaga componentă în și transmiteți obiectul sau datele pe care doriți să le redați pe componenta copil.

export funcția implicită App() {
let text = "Bună ziua, bun venit la MUO";
întoarcere (








);
}

Acum, creați o componentă copil și accesați suportul de text folosind foloseșteContext cârlig. Treceți Context variabila folosind createContext.

const ChildComponent = () => {
let text = useContext (Context);
console.log (text);
întoarcere 
{text}
;
};

Legate de: Cadre JavaScript care merită învățate​​​​​

Mai multe de explorat cu React

Tocmai ai învățat elementele de bază ale cârligelor. Este una dintre cele mai bune caracteristici ale React și, de asemenea, destul de prietenoasă cu dezvoltatorii. React este unul dintre cele mai bune cadre frontale pe care să le înveți astăzi pentru oportunități de angajare, creând aplicații cu o singură pagină sau pur și simplu pentru a-ți extinde cunoștințele de programare.

Vorbind despre extinderea cunoștințelor, gestionarea stării este doar o abilitate pe care dezvoltatorii React trebuie să o exerseze. Alte caracteristici cheie, cum ar fi recuzita, merită la fel de multă atenție.

Cum să utilizați elementele de recuzită în ReactJS

Dacă cauți sfaturi despre cum să folosești recuzita în ReactJS, ești în locul potrivit.

Citiți în continuare

Despre autor