React Hooks og API Call Sample App

Forrige gang skrev jeg om en React-eksempelapp med et API-kall til RandomUser.me.

Den versjonen var klassisk React, og nå har jeg oppdatert den til å bruke kroker i stedet.

Med klassisk React brukte vi klassekomponenter og muterte deres interne tilstand via setState når vi ønsket å gjøre noe.

Med React-kroker kan vi bruke funksjonelle komponenter i stedet, med State-kroken useState , som i seg selv er en React-funksjon.

Vi importerer useState slik øverst i filen vår:

import React, { useState } from "react";

Deretter erklærer vi vår funksjonelle komponent, slik:

export default function RandomUser() {}

Deretter vil vi bruke EcmaScript 6 (ES6) destrukturering og useState for å returnere en matrise for bruk i vår komponent:

const [name, setName] = useState([]);

user og setUser variabelnavn kan være hva du vil, så lenge de er beskrivende, selvfølgelig.

Deretter bruker vi effektkroken useEffect for å initialisere funksjonen vår og sette den inn i treet. useEffect "tjener samme formål som componentDidMount , componentDidUpdate og componentWillUnmount i React-klasser, men samlet til et enkelt API". (React Hooks-dokumentasjon)

Søt – useEffect tar seg av mye for oss!

Som du kan se, har vi et anrop til fetchRandomUser() , som vil være en asynkronfunksjon med vårt API-kall.

Hele koden ser slik ut:

Sammenlign denne funksjonelle komponenten med krokprøve, med den forrige prøven av klassekomponenter, vi har nå 48 rader, mot 65 rader før.

Her er Github-repoen