React Suspense: упрощение асинхронной выборки данных

React Suspense — это функция, упрощающая работу с асинхронной выборкой данных в компонентах React. Это позволяет вам приостановить рендеринг компонента до тех пор, пока не будут получены необходимые данные, что помогает уменьшить количество проблем с пользователем и повысить производительность приложения. В этой статье мы углубимся в то, что такое React Suspense, как он работает и как использовать его в своем приложении для упрощения выборки данных.

Что такое React Suspense?

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

Как использовать саспенс

React Suspense можно использовать в компонентах, выполняющих асинхронный рендеринг данных. Вы можете использовать его как альтернативу методу жизненного цикла componentDidMount или хуку useEffect. Саспенс требует двух вещей: компонента Suspense и компонента lazy.

import React, { Suspense, lazy } from "react";
const LazyComponent = lazy(() => import("./LazyComponent"));
function App() {
    return (
        <div>
            <Suspense fallback={<div>Loading...</div>}>
                <LazyComponent />
            </Suspense>
        </div>
    );
}

В приведенном выше примере LazyComponent — это компонент, который загружается лениво. Свойство fallback компонента Suspense — это то, что отображается пользователю во время извлечения компонента.

Подходы к выборке данных

Есть несколько подходов, которые вы можете использовать при использовании выборки данных с помощью React Suspense. Ниже мы рассмотрим три наиболее распространенных подхода.

Выборка при рендеринге

Подход «Выборка при рендеринге» — это самый простой способ использовать React Suspense для выборки данных. В этом подходе вы выполняете выборку данных в функции рендеринга вашего компонента. Таким образом, данные становятся доступными сразу после рендеринга компонента. Вот пример:

import React, { Suspense } from "react";

function LazyComponent() {
    const data = fetchDataFromAPI(); // synchronous call
    return <div>{data}</div>;
}

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

Выборка, затем визуализация

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

import React, { Suspense } from "react";

function LazyComponent() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetchDataFromAPI().then(response => setData(response));
    }, []);

    return <div>{data}</div>;
}

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

Рендеринг по мере извлечения

Render-as-you-fetch — это метод, при котором вы передаете компоненту Suspense объект, содержащий ваши ответы Promise. Вы можете использовать данные из промисов, как только они станут доступны.

import React, { Suspense } from "react";

function LazyComponent({ responses }) {
    const data = responses[0].data;

    return <div>{data}</div>;
}

function App() {
    const promises = [fetchDataFromAPI()]; // an array of promises

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

Заключение

React Suspense — это мощный инструмент для асинхронной выборки данных в приложениях React. Это позволяет легко и эффективно обрабатывать загрузку данных и координировать представление с готовыми данными. Кроме того, с помощью Suspense вы можете создавать отличные пользовательские интерфейсы с минимальным количеством кода. Мы надеемся, что эта статья поможет вам начать работу с Suspense и повысить производительность вашего приложения.

React Suspense: упрощение асинхронной выборки данных