React Suspense koordinavimas: lygiagretaus duomenų gavimo įvaldymas

React Suspense pakeitė tai, kaip tvarkome asinchronines operacijas, ypač duomenų gavimą. Tai leidžia komponentams „sustabdyti“ atvaizdavimą laukiant, kol bus įkelti duomenys, suteikiant deklaratyvų būdą valdyti įkėlimo būsenas. Tačiau paprastas atskirų duomenų gavimų apvyniojimas su Suspense gali sukelti kaskados efektą, kai vienas gavimas baigiamas prieš prasidedant kitam, o tai neigiamai veikia našumą. Šiame tinklaraščio įraše nagrinėjamos pažangios strategijos, kaip koordinuoti kelis duomenų gavimus lygiagrečiai, naudojant Suspense, optimizuojant programos reakciją ir gerinant naudotojo patirtį visai auditorijai.

Kaskados problemos supratimas gaunant duomenis

Įsivaizduokite scenarijų, kai reikia rodyti naudotojo profilį su jo vardu, avataru ir naujausia veikla. Jei kiekvieną duomenų dalį gausite nuosekliai, naudotojas matys įkėlimo suktuką vardui, tada kitą – avatarui ir galiausiai – veiklos srautui. Šis nuoseklus įkėlimo modelis sukuria kaskados efektą, atidedant viso profilio atvaizdavimą ir erzinant naudotojus. Tarptautiniams vartotojams, turintiems skirtingą tinklo greitį, šis vėlavimas gali būti dar ryškesnis.

Apsvarstykite šį supaprastintą kodo fragmentą:

function UserProfile() {
  const name = useName(); // Fetches user name
  const avatar = useAvatar(name); // Fetches avatar based on name
  const activity = useActivity(name); // Fetches activity based on name

  return (
    <div>
      <h2>{name}</h2>
      <img src={avatar} alt="User Avatar" />
      <ul>
        {activity.map(item => <li key={item.id}>{item.text}</li>)}
      </ul>
    </div>
  );
}

Šiame pavyzdyje useAvatar ir useActivity priklauso nuo useName rezultato. Tai sukuria aiškią kaskadą – useAvatar ir useActivity negali pradėti gauti duomenų, kol nebus baigtas useName. Tai neefektyvu ir yra dažnas našumo trūkumas.

Lygiagretaus duomenų gavimo su Suspense strategijos

Norint optimizuoti duomenų gavimą su Suspense, svarbiausia vienu metu inicijuoti visus duomenų užklausas. Štai kelios strategijos, kurias galite naudoti:

1. Duomenų išankstinis įkėlimas naudojant `React.preload` ir išteklius

Vienas galingiausių metodų yra iš anksto įkelti duomenis dar prieš atvaizduojant komponentą. Tai apima „ištekliaus“ (objekto, kuris apima duomenų gavimo pažadą) kūrimą ir išankstinį duomenų gavimą. `React.preload` padeda tai padaryti. Komponentui prireikus duomenų, jie jau yra prieinami, todėl įkėlimo būsena beveik visiškai pašalinama.

Apsvarstykite išteklių gaminio gavimui:

const createProductResource = (productId) => {
  let promise;
  let product;
  let error;

  const suspender = new Promise((resolve, reject) => {
    promise = fetch(`/api/products/${productId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        product = data;
        resolve();
      })
      .catch(e => {
        error = e;
        reject(e);
      });
  });

  return {
    read() {
      if (error) {
        throw error;
      }
      if (product) {
        return product;
      }
      throw suspender;
    },
  };
};

// Usage:
const productResource = createProductResource(123);

function ProductDetails() {
  const product = productResource.read();
  return (<div>{product.name}</div>);
}

Dabar galite iš anksto įkelti šį išteklių prieš atvaizduojant ProductDetails komponentą. Pavyzdžiui, maršruto perėjimo metu arba užvedus pelės žymeklį.

React.preload(productResource);

Tai užtikrina, kad duomenys greičiausiai bus prieinami komponentui ProductDetails jų prireikus, sumažinant arba panaikinant įkėlimo būseną.

2. `Promise.all` naudojimas vienalaikiam duomenų gavimui

Kitas paprastas ir efektyvus metodas yra naudoti Promise.all, kad būtų inicijuoti visi duomenų gavimai vienu metu vienoje Suspense riboje. Tai gerai veikia, kai iš anksto žinomos duomenų priklausomybės.

Grįžkime prie naudotojo profilio pavyzdžio. Užuot gavę duomenis nuosekliai, galime gauti vardą, avatarą ir veiklos srautą vienu metu:

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

async function fetchName() {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'Posted a photo' },
    { id: 2, text: 'Updated profile' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

function Name() {
  const name = useSuspense(fetchName());
  return <h2>{name}</h2>;
}

function Avatar({ name }) {
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="User Avatar" />;
}

function Activity({ name }) {
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

function UserProfile() {
  const name = useSuspense(fetchName());
  return (
    <div>
      <Suspense fallback=<div>Loading Avatar...</div>>
        <Avatar name={name} />
      </Suspense>
      <Suspense fallback=<div>Loading Activity...</div>>
        <Activity name={name} />
      </Suspense>
    </div>
  );
}

export default UserProfile;

Tačiau, jei kiekvienas iš „Avatar“ ir „Activity“ taip pat priklauso nuo „fetchName“, bet atvaizduojamas atskirose Suspense ribose, galite pakelti „fetchName“ pažadą į tėvinį ir pateikti jį per React Context.

import React, { createContext, useContext, useState, useEffect, Suspense } from 'react';

async function fetchName() {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 500));
  return 'John Doe';
}

async function fetchAvatar(name) {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 300));
  return `https://example.com/avatars/${name.toLowerCase().replace(' ', '-')}.jpg`;
}

async function fetchActivity(name) {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 800));
  return [
    { id: 1, text: 'Posted a photo' },
    { id: 2, text: 'Updated profile' },
  ];
}

function useSuspense(promise) {
  const [result, setResult] = useState(null);

  useEffect(() => {
    let didCancel = false;
    promise.then(
      (data) => {
        if (!didCancel) {
          setResult({ status: 'success', value: data });
        }
      },
      (error) => {
        if (!didCancel) {
          setResult({ status: 'error', value: error });
        }
      }
    );

    return () => {
      didCancel = true;
    };
  }, [promise]);

  if (result?.status === 'success') {
    return result.value;
  } else if (result?.status === 'error') {
    throw result.value;
  } else {
    throw promise;
  }
}

const NamePromiseContext = createContext(null);

function Avatar() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const avatar = useSuspense(fetchAvatar(name));
  return <img src={avatar} alt="User Avatar" />;
}

function Activity() {
  const namePromise = useContext(NamePromiseContext);
  const name = useSuspense(namePromise);
  const activity = useSuspense(fetchActivity(name));
  return (
    <ul>
      {activity.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

function UserProfile() {
  const namePromise = fetchName();

  return (
    <NamePromiseContext.Provider value={namePromise}>
      <Suspense fallback=<div>Loading Avatar...</div>>
        <Avatar />
      </Suspense>
      <Suspense fallback=<div>Loading Activity...</div>>
        <Activity />
      </Suspense>
    </NamePromiseContext.Provider>
  );
}

export default UserProfile;

3. Pasirinktinis kabliukas, skirtas valdyti lygiagrečius gavimus

Sudėtingesniuose scenarijuose su potencialiai sąlyginėmis duomenų priklausomybėmis galite sukurti pasirinktinį kabliuką, kad galėtumėte valdyti lygiagretų duomenų gavimą ir grąžinti išteklių, kurį gali naudoti Suspense.

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

function useParallelData(fetchFunctions) {
  const [resource, setResource] = useState(null);
  const mounted = useRef(true);

  useEffect(() => {
    mounted.current = true;
    const promises = fetchFunctions.map(fn => fn());

    const suspender = Promise.all(promises).then(
      (results) => {
        if (mounted.current) {
          setResource({ status: 'success', value: results });
        }
      },
      (error) => {
        if (mounted.current) {
          setResource({ status: 'error', value: error });
        }
      }
    );

    setResource({
      status: 'pending',
      value: suspender,
    });

    return () => {
      mounted.current = false;
    };
  }, [fetchFunctions]);

  const read = () => {
    if (!resource) {
      throw new Error('Resource not yet initialized');
    }
    if (resource.status === 'pending') {
      throw resource.value;
    }
    if (resource.status === 'error') {
      throw resource.value;
    }
    return resource.value;
  };

  return { read };
}

// Example usage:
async function fetchUserData(userId) {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id: userId, name: 'User ' + userId };
}

async function fetchUserPosts(userId) {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 500));
  return [{ id: 1, title: 'Post 1' }, { id: 2, title: 'Post 2' }];
}

function UserProfile({ userId }) {
  const { read } = useParallelData([
    () => fetchUserData(userId),
    () => fetchUserPosts(userId),
  ]);

  const [userData, userPosts] = read();

  return (
    <div>
      <h2>{userData.name}</h2>
      <ul>
        {userPosts.map(post => <li key={post.id}>{post.title}</li>)}
      </ul>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback=<div>Loading user data...</div>>
      <UserProfile userId={123} />
    </Suspense>
  );
}

export default App;

Šis metodas apima pažadų ir įkėlimo būsenų valdymo sudėtingumą kabliuke, todėl komponento kodas yra švaresnis ir labiau orientuotas į duomenų atvaizdavimą.

4. Atrankinis hidratavimas naudojant srautinį serverio atvaizdavimą

Serveriu atvaizduojamoms programoms React 18 pristato atrankinį hidratavimą su srautiniu serverio atvaizdavimu. Tai leidžia siųsti HTML klientui dalimis, kai jis tampa prieinamas serveryje. Galite apvynioti lėtai įkeliamus komponentus su <Suspense> ribomis, leidžiančiomis kitai puslapio daliai tapti interaktyviai, kol lėtieji komponentai vis dar įkeliami serveryje. Tai žymiai pagerina suvokiamą našumą, ypač vartotojams, turintiems lėtą tinklo ryšį ar įrenginius.

Apsvarstykite scenarijų, kai naujienų svetainė turi rodyti straipsnius iš įvairių pasaulio regionų (pvz., Azijos, Europos, Amerikos). Kai kurie duomenų šaltiniai gali būti lėtesni nei kiti. Atrankinis hidratavimas leidžia pirmiausia rodyti straipsnius iš greitesnių regionų, o tie, kurie yra iš lėtesnių regionų, vis dar įkeliami, neleidžiant užblokuoti viso puslapio.

Klaidų ir įkėlimo būsenų tvarkymas

Nors Suspense supaprastina įkėlimo būsenos valdymą, klaidų tvarkymas išlieka svarbus. Klaidų ribos (naudojant gyvavimo ciklo metodą componentDidCatch arba kabliuką useErrorBoundary iš tokių bibliotekų kaip `react-error-boundary`) leidžia grakščiai tvarkyti klaidas, kurios įvyksta gaunant duomenis arba atvaizduojant. Šios klaidų ribos turėtų būti dedamos strategiškai, kad būtų galima sugauti klaidas konkrečiose Suspense ribose, neleidžiant visai programai sugesti.

import React, { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

function MyComponent() {
  // ... fetches data that might error
}

function App() {
  return (
    <ErrorBoundary fallback={<div>Something went wrong!</div>}>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

Nepamirškite pateikti informatyvią ir patogią vartotojui atsarginę vartotojo sąsają tiek įkėlimo, tiek klaidų būsenoms. Tai ypač svarbu tarptautiniams vartotojams, kurie gali susidurti su lėtesniu tinklo greičiu ar regioninėmis paslaugų prastovomis.

Geriausia praktika optimizuojant duomenų gavimą su Suspense

• Nustatykite ir prioritetuokite svarbiausius duomenis: nustatykite, kurie duomenys yra būtini pirminiam jūsų programos atvaizdavimui, ir pirmiausia prioritetuokite tuos duomenis.
• Jei įmanoma, iš anksto įkelkite duomenis: naudokite `React.preload` ir išteklius, kad iš anksto įkeltumėte duomenis prieš komponentams jų prireikus, sumažindami įkėlimo būsenas.
• Gaukite duomenis vienu metu: naudokite `Promise.all` arba pasirinktinius kabliukus, kad vienu metu inicijuotumėte kelis duomenų gavimus.
• Optimizuokite API galinius taškus: užtikrinkite, kad jūsų API galiniai taškai būtų optimizuoti našumui, sumažinant delsą ir apkrovos dydį. Apsvarstykite galimybę naudoti tokias technikas kaip GraphQL, kad gautumėte tik jums reikalingus duomenis.
• Įgyvendinkite talpyklą: talpykloje saugokite dažnai naudojamus duomenis, kad sumažintumėte API užklausų skaičių. Apsvarstykite galimybę naudoti tokias bibliotekas kaip `swr` arba `react-query` patvarioms talpyklos galimybėms.
• Naudokite kodo padalijimą: padalinkite programą į mažesnius gabalus, kad sumažintumėte pradinį įkėlimo laiką. Derinkite kodo padalijimą su Suspense, kad palaipsniui įkeltumėte ir atvaizduotumėte skirtingas programos dalis.
• Stebėkite našumą: reguliariai stebėkite programos našumą naudodami tokius įrankius kaip Lighthouse arba WebPageTest, kad nustatytumėte ir išspręstumėte našumo kliūtis.
• Grakščiai tvarkykite klaidas: įgyvendinkite klaidų ribas, kad sugautumėte klaidas gaunant ir atvaizduojant duomenis, pateikdami informatyvius klaidų pranešimus vartotojams.
• Apsvarstykite serverio pusės atvaizdavimą (SSR): dėl SEO ir našumo priežasčių apsvarstykite SSR su srautiniu perdavimu ir atrankiniu hidratavimu, kad būtų užtikrinta greitesnė pradinė patirtis.

Išvada

React Suspense, kartu su lygiagretaus duomenų gavimo strategijomis, suteikia galingą įrankių rinkinį, skirtą reaguojančioms ir efektyvioms interneto programoms kurti. Suprasdami kaskados problemą ir įgyvendindami tokias technikas kaip išankstinis įkėlimas, vienalaikis gavimas su Promise.all ir pasirinktiniai kabliukai, galite žymiai pagerinti naudotojo patirtį. Nepamirškite grakščiai tvarkyti klaidas ir stebėti našumą, kad jūsų programa išliktų optimizuota vartotojams visame pasaulyje. React toliau tobulėjant, naujų funkcijų, pvz., atrankinio hidratavimo su srautiniu serverio atvaizdavimu, tyrinėjimas dar labiau padidins jūsų galimybes suteikti išskirtinę naudotojo patirtį, nepaisant vietos ar tinklo sąlygų. Pritaikę šias technikas, galite sukurti programas, kurios yra ne tik funkcionalios, bet ir malonios naudoti jūsų pasaulinei auditorijai.

Šiuo tinklaraščio įrašu buvo siekiama pateikti išsamų lygiagretaus duomenų gavimo strategijų su React Suspense apžvalgą. Tikimės, kad radote ją informatyvią ir naudingą. Skatiname eksperimentuoti su šiomis technikomis savo projektuose ir dalytis savo išvadomis su bendruomene.