M
MLOG

Zalety:

Wady:

2. Sekwencyjne 艂adowanie z zale偶no艣ciami

Gdy zasoby zale偶膮 od siebie, musisz je 艂adowa膰 sekwencyjnie. Suspense pozwala zorganizowa膰 ten przep艂yw, zagnie偶d偶aj膮c komponenty, kt贸re pobieraj膮 zale偶ne zasoby.

Przyk艂ad: Najpierw za艂aduj dane u偶ytkownika, a nast臋pnie u偶yj identyfikatora u偶ytkownika, aby pobra膰 jego posty.

            
import React, { Suspense } from 'react';
import fetchData from './fetchData';

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

function UserPosts({ userId }) {
  const postsResource = fetchData(`/api/posts?userId=${userId}`);
  const posts = postsResource.read();

  return (
    
    
      {posts.map((post) => (
        
  • {post.title}
    • 
      ))}
    

  );
}

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

  return (
    

      
{user.name}

      
{user.bio}

      
Posts

      Loading posts...
}>
); } function App() { return ( Loading user profile...}> ); } export default App;

Zalety:

Wady:

3. 艁膮czenie 艂adowania r贸wnoleg艂ego i sekwencyjnego

W wielu scenariuszach mo偶esz po艂膮czy膰 zar贸wno 艂adowanie r贸wnoleg艂e, jak i sekwencyjne, aby zoptymalizowa膰 wydajno艣膰. Za艂aduj niezale偶ne zasoby r贸wnolegle, a nast臋pnie za艂aduj zale偶ne zasoby sekwencyjnie po za艂adowaniu niezale偶nych zasob贸w.

Przyk艂ad: Za艂aduj dane u偶ytkownika i ostatni膮 aktywno艣膰 r贸wnolegle. Nast臋pnie, po za艂adowaniu danych u偶ytkownika, pobierz posty u偶ytkownika.

            
import React, { Suspense } from 'react';
import fetchData from './fetchData';

const userResource = fetchData('/api/user');
const activityResource = fetchData('/api/activity');

function UserPosts({ userId }) {
  const postsResource = fetchData(`/api/posts?userId=${userId}`);
  const posts = postsResource.read();

  return (
    
    
      {posts.map((post) => (
        
  • {post.title}
    • 
      ))}
    

  );
}

function UserProfile() {
  const user = userResource.read();
  const activity = activityResource.read();

  return (
    

      
{user.name}

      
{user.bio}

      
Last activity: {activity.date}

      
Posts

      Loading posts...
}>
); } function App() { return ( Loading user profile...}> ); } export default App;

W tym przyk艂adzie `userResource` i `activityResource` s膮 pobierane r贸wnolegle. Gdy dane u偶ytkownika s膮 dost臋pne, renderowany jest komponent `UserPosts`, co wyzwala pobieranie post贸w u偶ytkownika.

Zalety:

Wady:

4. U偶ywanie React Context do udost臋pniania zasob贸w

React Context mo偶e by膰 u偶ywany do udost臋pniania zasob贸w mi臋dzy komponentami i unikania ponownego pobierania tych samych danych wiele razy. Jest to szczeg贸lnie przydatne, gdy wiele komponent贸w potrzebuje dost臋pu do tego samego zasobu.

Przyk艂ad:

            
import React, { createContext, useContext, Suspense } from 'react';
import fetchData from './fetchData';

const UserContext = createContext(null);

function UserProvider({ children }) {
  const userResource = fetchData('/api/user');

  return (
    
      {children}
    
  );
}

function UserProfile() {
  const userResource = useContext(UserContext);
  const user = userResource.read();

  return (
    

      
{user.name}

      
{user.bio}

    

  );
}

function UserAvatar() {
  const userResource = useContext(UserContext);
  const user = userResource.read();

  return (
    {user.name}
  );
}

function App() {
  return (
    
      Loading user profile...
}> ); } export default App;

W tym przyk艂adzie `UserProvider` pobiera dane u偶ytkownika i udost臋pnia je wszystkim swoim dzieciom za po艣rednictwem `UserContext`. Zar贸wno komponenty `UserProfile`, jak i `UserAvatar` mog膮 uzyska膰 dost臋p do tych samych danych u偶ytkownika bez ponownego ich pobierania.

Zalety:

Wady:

5. Granice b艂臋d贸w dla solidnej obs艂ugi b艂臋d贸w

Suspense dobrze wsp贸艂pracuje z granicami b艂臋d贸w, aby obs艂ugiwa膰 b艂臋dy, kt贸re wyst臋puj膮 podczas pobierania danych lub renderowania. Granice b艂臋d贸w to komponenty React, kt贸re przechwytuj膮 b艂臋dy JavaScript w dowolnym miejscu w drzewie komponent贸w potomnych, rejestruj膮 te b艂臋dy i wy艣wietlaj膮 rezerwowy interfejs u偶ytkownika zamiast powodowa膰 awari臋 ca艂ego drzewa komponent贸w.

Przyk艂ad:

            
import React, { Suspense } from 'react';
import fetchData from './fetchData';
import ErrorBoundary from './ErrorBoundary';

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

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

  return (
    

      
{user.name}

      
{user.bio}

    

  );
}

function App() {
  return (
    Something went wrong!
}> Loading user profile...}> ); } export default App;

W tym przyk艂adzie `ErrorBoundary` przechwytuje wszelkie b艂臋dy, kt贸re wyst臋puj膮 podczas renderowania komponentu `UserProfile` lub pobierania danych u偶ytkownika. Je艣li wyst膮pi b艂膮d, wy艣wietla rezerwowy interfejs u偶ytkownika, zapobiegaj膮c awarii ca艂ej aplikacji.

Zalety:

Wady:

Praktyczne wzgl臋dy dla globalnej publiczno艣ci

Podczas tworzenia aplikacji React dla globalnej publiczno艣ci nale偶y wzi膮膰 pod uwag臋 nast臋puj膮ce kwestie:

Wnioski i najlepsze praktyki

Oto kilka wniosk贸w i najlepszych praktyk dotycz膮cych zarz膮dzania 艂adowaniem wielu zasob贸w za pomoc膮 React Suspense:

Wniosek

React Suspense zapewnia pot臋偶ny i elastyczny mechanizm do zarz膮dzania operacjami asynchronicznymi i poprawy wra偶e艅 u偶ytkownika w twoich aplikacjach. Rozumiej膮c podstawowe koncepcje Suspense i zasob贸w oraz stosuj膮c strategie opisane w tym po艣cie na blogu, mo偶esz efektywnie zarz膮dza膰 艂adowaniem wielu zasob贸w i budowa膰 bardziej responsywne i solidne aplikacje React dla globalnej publiczno艣ci. Pami臋taj, aby wzi膮膰 pod uwag臋 internacjonalizacj臋, dost臋pno艣膰 i optymalizacj臋 wydajno艣ci podczas tworzenia aplikacji dla u偶ytkownik贸w na ca艂ym 艣wiecie. Post臋puj膮c zgodnie z tymi najlepszymi praktykami, mo偶esz tworzy膰 aplikacje, kt贸re s膮 nie tylko funkcjonalne, ale tak偶e przyjazne dla u偶ytkownika i dost臋pne dla wszystkich.

Koordynacja zasob贸w w React Suspense: Opanowanie zarz膮dzania 艂adowaniem wielu zasob贸w | MLOG | MLOG