Uneori 5 minute sunt tot ce ai. Deci, în acest articol, vom atinge doar două dintre cele mai utilizate cârlige din React: useState și useEffect.

Dacă nu sunteți familiarizați cu cârlige, iată TL; DR: din cauza cârligelor, aproape că nu mai este nevoie de componente bazate pe clase. Cârligele vă permit să vă „conectați” la ciclul de viață subiacent și la modificările de stare ale unei componente dintr-o componentă funcțională. Mai mult decât atât, adesea îmbunătățesc lizibilitatea și organizarea componentelor dvs.

Dacă doriți o introducere corectă a acestui subiect, vă puteți alătura listei de așteptare pentru viitoare curs React avansat, sau dacă sunteți încă un începător, verificați-mi curs introductiv despre React.

useState

Să începem cu o componentă funcțională.

import React from 'react';

function App() {
  return (
    <div>
      <h1>0</h1>
      <button>Change!</button>
    </div>
  );
}

Contor la 0

După cum puteți vedea, nimic fantezist în acest moment. Redăm doar un text și un buton (inutil).

Acum să importăm primul nostru cârlig, useState pentru a învăța cum să gestionăm starea în componenta noastră funcțională.

Deoarece acest cârlig este o funcție, haideți console.log ce primim din el.

import React, { useState } from 'react';

function App() {
  const value = useState();
  console.log(value);

  return (
    <div>
      <h1>0</h1>
      <button>Change!</button>
    </div>
  );
}

În consolă, obținem o matrice

> [null, ƒ()]

Și când transmitem un argument către useState

const value = useState(true);

În consolă, obținem o matrice cu valoarea noastră ca primul membru.

> [true, ƒ()]

Acum, în componenta noastră, putem accesa starea noastră la value[0] și redați-o în <h1> în loc de o valoare codificată.

import React, { useState } from 'react';

function App() {
  const value = useState(0);
  console.log(value); // [0, ƒ()]

  return (
    <div>
      <h1>{value[0]}</h1>
      <button>Change!</button>
    </div>
  );
}

Contor la 0

Ne putem îmbunătăți codul folosind destructurarea matricei pentru a stoca valoarea de la useState cârlig. Este similar cu destructurarea obiectelor, care tinde să fie ceva mai frecvent văzută. În cazul în care nu sunteți familiarizați cu destructurarea obiectelor, iată o recapitulare rapidă:

const person = {
  name: 'Joe',
  age: 42
};

// creates 2 const values from person object
const { name, age } = person;
console.log(name); // 'Joe'
console.log(age); // 42

Distrugerea matricei este aproape aceeași, dar folosește paranteze pătrate [] în loc de aparate dentare cretate {}.

Un sfat rapid: în destructurarea obiectelor, numele variabilelor create trebuie să se potrivească cu numele proprietăților din obiect. Pentru destructurarea matricei, nu este cazul. Totul ține de comandă. Avantajul de aici este că putem numi articolele oricum dorim.

Folosind destructurarea matricei, putem obține valoarea inițială a stării din useState() cârlig.

import React, { useState } from 'react';

function App() {
  // remember, there's a second item from the array that's missing here, but we'll come right back to use it soon
  const [count] = useState(0);  

  return (
    <div>
      <h1>{count}</h1>
      <button>Change!</button>
    </div>
  );
}

OK, avem valoarea inițială a stării. Cum schimbăm valoarea în stare cu cârlige?

Sa nu uiti asta useState() hook returnează o matrice cu 2 membri. Al doilea membru este o funcție care actualizează starea!

const [count, setCount] = useState(0);

Puteți, desigur, să-l numiți așa cum doriți, dar, prin convenție, se numește în mod normal cu prefixul “set-“, iar apoi a fost numită orice variabilă de stare pe care dorim să o actualizăm, deci setCount este.

Este simplu să utilizați această funcție. Sunați-l și transmiteți noua valoare pe care doriți să o aibă acea stare! Sau, la fel this.setState într-o componentă de clasă, puteți trece o funcție care primește starea veche și returnează starea nouă. Regula generală: faceți acest lucru oricând trebuie să vă bazați pe starea trecută pentru a determina noua stare.

Pentru a-l apela, îl vom transmite către onClick ascultător de evenimente. Și la fel ca în cazul unui obișnuit setState într-o componentă bazată pe clase, putem transmite actualizarea stării noastre către setCount.

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>
        Change!
      </button>
    </div>
  );
}

Putem curăța puțin acest lucru, extragând actualizarea de stare într-o funcție separată.

function App() {
  const [count, setCount] = useState(0);

  function change() {
    setCount(prevCount => prevCount + 1);
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={change}>Change!</button>
    </div>
  );
}

Grozav! Și acum, când putem vedea contorul crescând când facem clic pe buton.

Contor la 1

Desigur, useState poate deveni mult mai complicat decât acesta, dar avem doar 5 minute aici, așa că să trecem la următorul cârlig deocamdată.

useEffect

Cârligele au simplificat destul de multe lucruri, în comparație cu modul în care lucrurile erau în componentele bazate pe clase. Anterior, trebuia să știm puțin despre metodele ciclului de viață și care dintre ele este cea mai potrivită pentru ce situație. useEffect hook a simplificat această situație. Dacă doriți să efectuați efecte secundare, solicitare de rețea, manipulare manuală a DOM, ascultători de evenimente sau expirări și intervale.

useEffect cârligul poate fi importat la fel ca useState.

import React, { useState, useEffect } from 'react';

A face useEffect faceți ceva, îi pasăm o funcție anonimă ca argument. Ori de câte ori React redă această componentă, aceasta va rula funcția către care trecem useEffect.

useEffect(() => {
  /* any update can happen here */
});

Așa ar putea arăta întregul cod.

import React, { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);

  function change() {
    setCount(prevCount => prevCount + 1);
  }

  useEffect(() => {
    /* any update can happen here */
  });

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={change}>Change!</button>
    </div>
  );
}

export default App;

De exemplu, vom folosi un frumos npm pachet care generează o culoare aleatorie. Simțiți-vă liber să scrieți propriul dvs., dacă doriți, desigur, dar pentru acest tutorial, îl vom instala, npm i randomcolorși importați.

import randomcolor from 'randomcolor';

Să ne folosim acum de cunoștințele noastre despre useState cârlig pentru a stoca unele culori aleatorii în stare.

const [color, setColor] = useState(''); // initial value can be an empty string

Apoi putem atribui apoi culoarea contorului pe care îl avem deja.

<h1 style={{ color: color }}>{count}</h1>

Acum, doar de dragul ei, să schimbăm culoarea tejghelei la fiecare clic al Change! buton. useEffect va rula de fiecare dată când componenta se redă și componenta se va reda de fiecare dată când starea este modificată.

Deci, dacă scriem următorul cod, ne-ar bloca într-o buclă infinită! Aceasta este o problemă foarte obișnuită cu useEffect

useEffect(() => {
  setColor(randomcolor());
});

setColor stări de actualizări, care redă componenta care apelează useEffect, care rulează setColor pentru a actualiza starea, care redă componenta … Yikes!

Probabil noi numai vreau să rulez asta useEffect cand count modificări variabile.

A spune useEffect care variabilă (variabile) să țină evidența, oferim o serie de astfel de variabile ca un al doilea argument.

useEffect(() => {
  setColor(randomcolor());
}, [count]);

Contor la 2

Practic, acest lucru spune „rulați doar acest efect dacă count modificări de stare. Astfel putem schimba culoarea și nu vom face efectul nostru să ruleze la infinit.

Concluzie

Mai sunt multe de învățat despre cârlige, dar sper că ți-a plăcut această scurtă privire de 5 minute în cârlige.

Pentru a afla mai multe despre React Hooks și alte caracteristici extraordinare ale React, vă puteți alătura listei de așteptare pentru my viitoare curs React avansat. Sau, dacă sunteți în căutarea unui prieten mai bun pentru începători, puteți să-l verificați curs introductiv despre React.

Codificare fericită?