Reactov `use:` hook: Sveobuhvatan vodič

Hook use: u Reactu nudi moćan i deklarativan način za rukovanje učitavanjem resursa i dohvaćanjem podataka izravno unutar vaših komponenti. Omogućuje vam da suspendirate renderiranje dok resurs ne postane dostupan, što dovodi do poboljšanog korisničkog iskustva i pojednostavljenog upravljanja podacima. Ovaj vodič će detaljno istražiti use: hook, pokrivajući njegove osnove, napredne slučajeve upotrebe i najbolje prakse.

Što je use: hook?

Hook use: je poseban React hook dizajniran za integraciju sa Suspenseom. Suspense je mehanizam koji omogućuje komponentama da "pričekaju" nešto prije renderiranja, poput podataka s API-ja. Hook use: omogućuje komponentama da izravno "čitaju" promise ili drugi resurs, suspendirajući komponentu dok se resurs ne razriješi ili postane dostupan. Ovaj pristup promiče deklarativniji i učinkovitiji način rukovanja asinkronim operacijama u usporedbi s tradicionalnim metodama poput useEffect i biblioteka za upravljanje stanjem.

Zašto koristiti use:?

Evo zašto biste trebali razmisliti o korištenju use: hooka:

• Pojednostavljeno dohvaćanje podataka: Uklanja potrebu za ručnim upravljanjem stanjem i pozivima useEffecta za dohvaćanje podataka.
• Deklarativan pristup: Jasno izražava ovisnosti o podacima izravno unutar komponente.
• Poboljšano korisničko iskustvo: Suspense osigurava glatke prijelaze i stanja učitavanja.
• Bolje performanse: Smanjuje nepotrebna ponovna renderiranja i optimizira učitavanje resursa.
• Čitljivost koda: Pojednostavljuje logiku komponente i poboljšava održivost.

Osnove use: hooka

Osnovna upotreba

Hook use: uzima promise (ili bilo koji 'thenable' objekt) kao svoj argument i vraća razriješenu vrijednost promisea. Ako je promise još uvijek na čekanju, komponenta se suspendira. Evo jednostavnog primjera:

Primjer 1: Dohvaćanje i prikaz podataka

Recimo da želimo dohvatiti korisničke podatke s API-ja i prikazati ih. Možemo koristiti use: na sljedeći način:

Stvaranje resursa (funkcija za dohvaćanje)

Prvo, stvorite funkciju za dohvaćanje podataka. Ova funkcija će vratiti Promise:

            
async function fetchUser(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user: ${response.status}`);
  }
  return response.json();
}

            

              
                Copy
              
            
          

Korištenje use: u komponenti

            
import React, { Suspense } from 'react';

async function fetchUser(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user: ${response.status}`);
  }
  return response.json();
}

function UserProfile({ userId }) {
  const user = React.use(fetchUser(userId));

  return (
    

      
{user.name}
      
Email: {user.email}
      
Phone: {user.phone}
    
  );
}

function App() {
  return (
    Loading user data...