React Suspense un Error Boundaries: Uzlabota ielādes un kļūdu apstrāde

React Suspense un Error Boundaries ir spēcīgas funkcijas, kas ļauj izstrādātājiem veidot noturīgākas un lietotājam draudzīgākas lietotnes. Tās nodrošina deklaratīvu veidu, kā apstrādāt ielādes stāvokļus un negaidītas kļūdas, uzlabojot vispārējo lietotāja pieredzi un vienkāršojot izstrādes procesu. Šis raksts sniedz visaptverošu ceļvedi par React Suspense un Error Boundaries efektīvu izmantošanu, aptverot visu, sākot no pamatjēdzieniem līdz pat uzlabotām metodēm.

React Suspense izpratne

React Suspense ir mehānisms, lai "apturētu" komponenta renderēšanu, līdz tiek izpildīts noteikts nosacījums, parasti datu pieejamība no asinhronas operācijas. Tas ļauj jums parādīt rezerves lietotāja saskarni, piemēram, ielādes indikatorus, kamēr gaidāt datu ielādi. Suspense vienkāršo ielādes stāvokļu pārvaldību, novēršot nepieciešamību pēc manuālas nosacījumu renderēšanas un uzlabojot koda lasāmību.

Suspense galvenie jēdzieni

• Suspense Boundaries: Šie ir React komponenti, kas aptver komponentus, kas var apturēt. Tie definē rezerves lietotāja saskarni, kas jāparāda, kamēr aptvertie komponenti ir apturēti.
• Fallback UI: Lietotāja saskarne, kas tiek parādīta, kamēr komponents ir apturēts. Tas parasti ir ielādes indikators vai vietturis.
• Asinhronā datu iegūšana: Suspense nemanāmi darbojas ar asinhronām datu iegūšanas bibliotēkām, piemēram, `fetch`, `axios` vai pielāgotiem datu iegūšanas risinājumiem.
• Koda sadalīšana: Suspense var izmantot arī, lai aizkavētu koda moduļu ielādi, iespējojot koda sadalīšanu un uzlabojot sākotnējo lapas ielādes veiktspēju.

Suspense pamata ieviešana

Šeit ir vienkāršs piemērs, kā izmantot Suspense, lai parādītu ielādes indikatoru, kamēr tiek iegūti dati:

import React, { Suspense } from 'react';

// Simulēt datu iegūšanu (piemēram, no API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Izveidot resursu, ko Suspense var izmantot
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

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

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Komponents, kas nolasa no resursa
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Name: {data.name}
      
Age: {data.age}
    
  );
};

const App = () => {
  return (
    Loading user data...