M

MLOG

Lietuvių

Atraskite efektyvų duomenų gavimą „React“ su „Suspense“! Ištirkite įvairias strategijas, nuo komponentų lygio įkėlimo iki lygiagretaus duomenų gavimo, ir kurkite interaktyvias bei patogias programas.

React Suspense: Duomenų Gavimo Strategijos Šiuolaikinėms Programoms

React Suspense – tai galinga funkcija, pristatyta React 16.6 versijoje, kuri supaprastina asinchroninių operacijų, ypač duomenų gavimo, apdorojimą. Ji leidžia „sustabdyti“ komponento atvaizdavimą, kol laukiama duomenų įkėlimo, suteikdama deklaratyvesnį ir patogesnį būdą valdyti įkėlimo būsenas. Šiame vadove nagrinėjamos įvairios duomenų gavimo strategijos naudojant React Suspense ir siūlomos praktinės įžvalgos kuriant interaktyvias ir našias programas.

React Suspense Supratimas

Prieš gilinantis į konkrečias strategijas, supraskime pagrindines React Suspense sąvokas:

Duomenų Gavimo Strategijos su Suspense

Štai kelios efektyvios duomenų gavimo strategijos naudojant React Suspense:

1. Duomenų Gavimas Komponento Lygmenyje

Tai yra pats paprasčiausias metodas, kai kiekvienas komponentas gauna savo duomenis Suspense ribose. Jis tinka paprastiems komponentams su nepriklausomais duomenų poreikiais.

Pavyzdys:

Tarkime, turime UserProfile komponentą, kuriam reikia gauti vartotojo duomenis iš API:

// Paprasta duomenų gavimo priemonė (pakeiskite savo pageidaujama biblioteka)
const fetchData = (url) => {
  let status = 'pending';
  let result;
  let suspender = fetch(url)
    .then(res => {
      if (!res.ok) {
        throw new Error(`HTTP error! Status: ${res.status}`);
      }
      return res.json();
    })
    .then(
      res => {
        status = 'success';
        result = res;
      },
      err => {
        status = 'error';
        result = err;
      }
    );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }
      return result;
    }
  };
};

const userResource = fetchData('/api/user/123');

function UserProfile() {
  const user = userResource.read();
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<div>Įkeliami vartotojo duomenys...</div>}>
      <UserProfile />
    </Suspense>
  );
}

Paaiškinimas:

Privalumai:

Trūkumai:

2. Lygiagretus Duomenų Gavimas

Siekiant išvengti pakopinio duomenų gavimo, galite inicijuoti kelias duomenų užklausas vienu metu ir naudoti Promise.all ar panašias technikas, kad palauktumėte, kol visos jos bus baigtos, prieš atvaizduojant komponentus. Tai sumažina bendrą įkėlimo laiką.

Pavyzdys:

const userResource = fetchData('/api/user/123');
const postsResource = fetchData('/api/user/123/posts');

function UserProfile() {
  const user = userResource.read();
  const posts = postsResource.read();

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <h3>Įrašai:</h3>
      <ul>
        {posts.map(post => (<li key={post.id}>{post.title}</li>))}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<div>Įkeliami vartotojo duomenys ir įrašai...</div>}>
      <UserProfile />
    </Suspense>
  );
}

Paaiškinimas:

Privalumai:

Trūkumai:

3. Atrankinė Hidratacija (Serverio Pusės Atvaizdavimui - SSR)

Naudojant Serverio Pusės Atvaizdavimą (SSR), Suspense gali būti naudojamas atrankinei puslapio dalių hidratacijai. Tai reiškia, kad galite teikti pirmenybę svarbiausių puslapio dalių hidratacijai, pagerindami laiką iki interaktyvumo (Time to Interactive - TTI) ir suvokiamą našumą. Tai naudinga scenarijuose, kai norite kuo greičiau parodyti pagrindinį išdėstymą ar esminį turinį, atidedant mažiau svarbių komponentų hidrataciją.

Pavyzdys (Konceptualus):

// Serverio pusėje:
<Suspense fallback={<div>Įkeliamas kritinis turinys...</div>}>
  <CriticalContent />
</Suspense>
<Suspense fallback={<div>Įkeliamas neprivalomas turinys...</div>}>
  <OptionalContent />
</Suspense>

Paaiškinimas:

Privalumai:

Trūkumai:

4. Duomenų Gavimo Bibliotekos su Suspense Palaikymu

Kelios populiarios duomenų gavimo bibliotekos turi integruotą React Suspense palaikymą. Šios bibliotekos dažnai suteikia patogesnį ir efektyvesnį būdą gauti duomenis ir integruotis su Suspense. Keletas žymių pavyzdžių:

Pavyzdys (naudojant SWR):

import useSWR from 'swr'

const fetcher = (...args) => fetch(...args).then(res => res.json())

function UserProfile() {
  const { data: user, error } = useSWR('/api/user/123', fetcher, { suspense: true })

  if (error) return <div>nepavyko įkelti</div>
  if (!user) return <div>įkeliama...</div> // Tai tikriausiai niekada nebus atvaizduota su Suspense

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  )
}

function App() {
  return (
    <Suspense fallback={<div>Įkeliami vartotojo duomenys...</div>}>
      <UserProfile />
    </Suspense>
  );
}

Paaiškinimas:

Privalumai:

Trūkumai:

Klaidų Apdorojimas su Suspense

Klaidų apdorojimas yra labai svarbus naudojant Suspense. React suteikia ErrorBoundary komponentą, skirtą gaudyti klaidas, kurios įvyksta Suspense ribose.

Pavyzdys:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Atnaujinkite būseną, kad kitas atvaizdavimas parodytų atsarginę sąsają.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Taip pat galite registruoti klaidą klaidų pranešimo tarnyboje
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Galite atvaizduoti bet kokią pasirinktinę atsarginę sąsają
      return <h1>Kažkas nutiko ne taip.</h1>;
    }

    return this.props.children; 
  }
}

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Įkeliama...</div>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  );
}

Paaiškinimas:

Geriausios React Suspense Naudojimo Praktikos

Pavyzdžiai iš Realaus Pasaulio

React Suspense gali būti taikomas įvairiuose scenarijuose, įskaitant:

1 pavyzdys: Tarptautinė elektroninės prekybos platforma

Įsivaizduokite el. prekybos platformą, aptarnaujančią klientus įvairiose šalyse. Produkto informacija, tokia kaip kainos ir aprašymai, gali būti gaunama atsižvelgiant į vartotojo vietą. Suspense gali būti naudojamas rodyti įkėlimo indikatorių, kol gaunama lokalizuota produkto informacija.

function ProductDetails({ productId, locale }) {
  const productResource = fetchData(`/api/products/${productId}?locale=${locale}`);
  const product = productResource.read();

  return (
    <div>
      <h2>{product.name}</h2>
      <p>Kaina: {product.price}</p>
      <p>Aprašymas: {product.description}</p>
    </div>
  );
}

function App() {
  const userLocale = getUserLocale(); // Funkcija, nustatanti vartotojo lokalę
  return (
    <Suspense fallback={<div>Įkeliami produkto duomenys...</div>}>
      <ProductDetails productId="123" locale={userLocale} />
    </Suspense>
  );
}

2 pavyzdys: Pasaulinis socialinės medijos naujienų srautas

Apsvarstykite socialinės medijos platformą, rodančią įrašų srautą iš viso pasaulio vartotojų. Kiekviename įraše gali būti tekstas, paveikslėliai ir vaizdo įrašai, kurių įkėlimas gali užtrukti skirtingą laiką. Suspense gali būti naudojamas rodyti laikinąsias vietas atskiriems įrašams, kol jų turinys kraunasi, užtikrinant sklandesnį slinkimo potyrį.

function Post({ postId }) {
  const postResource = fetchData(`/api/posts/${postId}`);
  const post = postResource.read();

  return (
    <div>
      <p>{post.text}</p>
      {post.image && <img src={post.image} alt="Post Image" />}
      {post.video && <video src={post.video} controls />}
    </div>
  );
}

function App() {
  const postIds = getPostIds(); // Funkcija, gaunanti įrašų ID sąrašą
  return (
    <div>
      {postIds.map(postId => (
        <Suspense key={postId} fallback={<div>Įkeliamas įrašas...</div>}>
          <Post postId={postId} />
        </Suspense>
      ))}
    </div>
  );
}

Išvada

React Suspense yra galingas įrankis asinchroniniam duomenų gavimui valdyti React programose. Suprasdami įvairias duomenų gavimo strategijas ir geriausias praktikas, galite kurti interaktyvias, patogias ir našias programas, kurios suteikia puikią vartotojo patirtį. Eksperimentuokite su skirtingomis strategijomis ir bibliotekomis, kad rastumėte geriausią požiūrį savo konkretiems poreikiams.

React toliau tobulėjant, Suspense tikriausiai vaidins dar svarbesnį vaidmenį duomenų gavime ir atvaizdavime. Būdami informuoti apie naujausius pokyčius ir geriausias praktikas, galėsite išnaudoti visą šios funkcijos potencialą.