Распространенные варианты использования React Suspense! Давайте рассмотрим несколько примеров.

1- Отложенная загрузка компонентов.

Одним из наиболее распространенных вариантов использования React Suspense является отложенная загрузка компонентов. Отложенная загрузка компонентов позволяет сократить время начальной загрузки приложения и повысить его общую производительность.

Вот пример того, как вы можете использовать React Suspense для ленивой загрузки компонента:

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

В этом примере мы импортируем lazy и Suspense из React. Затем мы определяем LazyComponent, используя функцию lazy и оператор import. Это говорит React загружать LazyComponent лениво, только когда это необходимо.

Затем мы используем компонент Suspense для рендеринга LazyComponent. Если LazyComponent еще не загружен, React отобразит резервный пользовательский интерфейс, который в данном случае представляет собой простое сообщение о загрузке.

2-Извлечение данных

Другим распространенным вариантом использования React Suspense является управление выборкой данных. Используя React Suspense для обработки выборки данных, вы можете создать более плавный и отзывчивый пользовательский интерфейс.

Вот пример того, как вы можете использовать React Suspense для управления выборкой данных:

import React, { Suspense } from 'react';

const fetchData = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' },
        { id: 3, name: 'Bob' },
      ]);
    }, 2000);
  });
};

function DataComponent() {
  const data = fetchData();

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <DataComponent />
      </Suspense>
    </div>
  );
}

В этом примере мы определяем функцию fetchData, которая возвращает обещание, которое разрешается с помощью массива данных через 2 секунды. Затем мы определяем DataComponent, который использует функцию fetchData для получения данных и отображения списка элементов.

Мы используем компонент Suspense для рендеринга DataComponent. Если данные еще недоступны, React отобразит резервный пользовательский интерфейс, который в данном случае представляет собой простое сообщение о загрузке.

3-вложенные приостановки

Вы также можете использовать вложенные компоненты Suspense для управления несколькими асинхронными операциями в рамках одного компонента.

Вот пример того, как вы можете использовать вложенные компоненты Suspense:

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const fetchData = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' },
        { id: 3, name: 'Bob' },
      ]);
    }, 2000);
  });
};

function DataComponent() {
  const data = fetchData();

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <DataComponent />
        <Suspense fallback={<div>Loading...</div>}>
          <LazyComponent />
        </Suspense>
      </Suspense>
    </div>
  );
}

В этом примере мы определяем функцию fetchData, которая возвращает обещание, которое разрешается с помощью массива данных через 2 секунды. Затем мы определяем DataComponent, который использует функцию fetchData для получения данных и отображения списка элементов.

Мы используем компонент верхнего уровня Suspense для рендеринга как DataComponent, так и LazyComponent. Если данные еще недоступны, React отобразит резервный пользовательский интерфейс, который в данном случае представляет собой простое сообщение о загрузке.

Мы также используем вложенный компонент Suspense для обработки ленивой загрузки файла LazyComponent. Если LazyComponent еще не загружен, React отобразит резервный пользовательский интерфейс, который также является простым сообщением о загрузке.

Используя вложенные Suspense компонентов, мы можем управлять несколькими асинхронными операциями в одном компоненте и обеспечивать плавный и отзывчивый пользовательский интерфейс.

Спасибо, что читаете мой блог

Лавджот Сайни