En aquest article, aprendrem breument què són els ganxos React, els tipus de ganxos i també exemples bàsics d’ús d’alguns d’aquests ganxos a la vostra aplicació React .

També us pot interessar: “Integració de Stripe Checkout amb React”

Què són els React Hooks?

React Hooks són funcions integrades que us permeten utilitzar l’estat dins dels components de la funció. Introduït com a API especials a la versió de React 16.8 llançada el 2019, Hooks us permetrà “enganxar” a les funcions de React, com ara els mètodes de cicle de vida. Una proesa que abans només era possible utilitzant components de classe.

Els React Hooks són increïblement potents perquè permeten als desenvolupadors de React transformar components funcionals sense estat de només renderitzar interfícies d’usuari reutilitzables a ser capaços de desar i mantenir l’estat i la lògica. Abans d’això, als desenvolupadors els costava reutilitzar la lògica i compartir l’estat entre components de classe sense utilitzar abstraccions de reacció encara més complexes. React Hooks va permetre extreure la lògica amb estat entre components.

En resum, aquí teniu els avantatges que els desenvolupadors van obtenir amb la introducció de React Hooks.

• Estructura de codi més senzilla que elimina les paraules clau ” això i enllaça” .

• Més fàcil reutilitzar la lògica i compartir l’estat sense tractar amb abstraccions complexes de React que són difícils de provar i gestionar.
• És possible un flux de dades unidireccional de dalt a baix més precís sense interrompre l’ordre dels components existents.
• Quan s’utilitza de manera òptima, React Hooks us pot ajudar a eliminar la necessitat d’integrar una biblioteca de gestió estatal.

Ganxos de reacció comuns

Hi ha diversos tipus de ganxos de reacció integrats. Fins i tot podeu crear els vostres propis ganxos personalitzats que continguin la vostra pròpia lògica funcional desitjada, que podeu reutilitzar en diferents components.

El llançament de React 16.8 va incloure deu ganxos integrats classificats en dos: ganxos bàsics i ganxos addicionals. D’aquests ganxos, examinarem dos ganxos que són els més utilitzats: useState i useEffect.

UseState React Hook

El ganxo useState és el ganxo React més popular. Us permet “utilitzar l’estat” en un component de funció. Això vol dir que podeu llegir, manipular i actualitzar l’estat mitjançant useState Hook.

A continuació es mostra una interpretació bàsica de useState Hook:

const [state, setState] = useState(initialState);

Per exemple, la mostra anterior té un estat que inicialment és el mateix valor que initialState. L’ estat inicial pot prendre un número, una cadena o fins i tot una matriu depenent del tipus de dades que es tingui a mà. setState és una funció que s’utilitza per actualitzar el valor de l’estat. Per exemple, setState(estat actualitzat).

Utilitzem useState Hook en un component senzill i funcional.

function Age() {
 const [age, setAge] = useState(10);
 
 return (
     <div>
         <p>I am {age} Years Old</p>
       <div>
          <button onClick={() => setAge(age + 1)}>Increase my age!      </button>
          <button onClick={() => setAge(age - 1)}>Decrease my age! </button>
       </div>
     </div>
 )
}

Expliquem ràpidament com funciona el codi anterior:

• Tenim la interpretació bàsica del ganxo:

    const [age, setAge] = useState(10);

L’edat té un estat inicial de 10 que llavors anomenem entre els< pàg> etiqueta.

• Els botons tenen un controlador onClick que crida a la funció setAge , que augmentarà o disminuirà el nostre estat d’edat inicial en funció del botó en què es faci clic.

UseEffect React Hook

El ganxo useEffect accepta una funció que executa després de cada renderització. S’utilitza habitualment per produir efectes secundaris. Això pot anar des de manipular el DOM o les API del navegador o fins i tot obtenir dades d’API externes. El ganxo useEffect també ens ajuda a assolir capacitats en un component de funció fet anteriorment pels mètodes de cicle de vida de React. Penseu en l’useEffect Hook com la combinació dels mètodes de cicle de vida componentDidMount , componentDidUpdate i componentWillUnmount . A més, també podem configurar el ganxo useEffect perquè es mostri en funció de canvis de valors específics.

Aquí teniu una interpretació bàsica del ganxo useEffect.

useEffect(functionToRun);

Per exemple, utilitzem useEffect Hook de manera més elaborada utilitzant la mostra de component funcional anterior.

function Age() {
 const [age, setAge] = useState(10);
 
 useEffect(() => {
   setAge(20)
 },[]);
 
 return (
   <div>
     <p>I am {age} Years Old</p>
     <div>
       <button onClick={() => setAge(age + 1)}>
         Increase my age!
       </button>
       <button onClick={() => setAge(age - 1)}>
         Decrease my age!
       </button>
     </div>
   </div>
 );
}

L’useEffect al renderitzar estableix el nou valor d’edat a 20. També vam passar una matriu buida que permetrà que el ganxo useEffect s’executi només una vegada.

He col·locat un console.log a la pantalla de dalt. Podem veure com el valor de l’estat d’edat va canviar del 10 inicial al 20, causat pel ganxo useEffect. Aleshores veiem com canvia l’estat mentre fem clic al botó.

Altres ganxos de reacció

També hi ha altres ganxos com useContext(), useMemo(), entre d’altres. Podeu consultar la resta a la documentació oficial .

Tanmateix, hi ha dues regles que hauríeu de seguir quan feu servir React Hooks.

• Truqueu sempre els ganxos al nivell superior, tal com es mostra als exemples que hem utilitzat. Això vol dir que no podem cridar ganxos dins de bucles, condicions o funcions imbricades.
• Utilitzeu només ganxos des dels components de la funció React.

Molts IDE de codi com VSCode tenen un linter integrat que fa complir aquestes regles i molt més.

Aplicació d’usuaris

Finalment, creem una aplicació més complexa amb tot el que hem après sobre React, useState i useEffect Hooks.

Recollirem dades d’una API externa amb dades d’usuari falses . Com hem après, aquest és un cas d’ús perfecte per a useEffect Hook.

function Users(){
 const [users, setUsers] = useState([]);
 useEffect(() => {
       fetch("https://jsonplaceholder.typicode.com/users/")
           .then(res => res.json())
           .then(data => setUsers(data))
     }, [])
 
 return (
     <ul>
         {users.map(user => (
         <li key={user.id}>
             {user.name}lives in {user.address.city}
         </li>
         ))}
     </ul>
 );
}

A la mostra anterior, podeu veure com hem utilitzat:

• El ganxo useState per establir i actualitzar l’estat inclòs dins del ganxo useEffect.
• El ganxo useEffect interactua amb l’ API del navegador anomenada Fetch , que ens permet extreure dades d’API externes. També vam passar una matriu buida per assegurar-nos que s’executava una vegada.

De nou, al vídeo anterior, he col·locat un console.log perquè pugueu veure com hem extret dades específiques per mostrar.

Resum

Ens ho hem passat bé! Els ganxos React són realment potents quan s’utilitzen correctament. En conclusió, vam aprendre què són els React Hooks i els immensos beneficis que aporten als desenvolupadors. A més, també vam examinar breument els diferents tipus de ganxos i les normes que en guien l’ús. Finalment, vam crear una aplicació React senzilla que va demostrar com utilitzar els ganxos useState i useEffect.

Si et sents aventurer i vols crear més aplicacions amb els ganxos de React, consulta el nostre article sobre la integració de Stripe Checkout amb React .

Unimedia Technology

Aquí a Unimedia Technology tenim un equip de desenvolupadors de React que us poden ajudar a desenvolupar les vostres aplicacions de reacció més complexes.