Как использовать React Suspense для улучшения ваших проектов в React

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

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

React Suspense – одна из таких функций, которая стала популярной среди разработчиков React.

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

Что такое React Suspense?

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

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

Проблема состояний загрузки в React

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

Эту проблему решил React Suspense, который предлагает более сложный и интегрированный подход к управлению асинхронными действиями и состояниями загрузки.

Основные концепции и функции React Suspense

Давайте поговорим о некоторых концепциях и функциях, чтобы помочь вам понять React Suspense и то, как он работает.

1) Компонент Suspense

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

<Suspense fallback={<LeoFallback />}>  <LeoComponent /></Suspense>

В этом случае, если компонент LeoComponent не готов, React отобразит компонент LeoFallback вместо него.

2) Использование React.lazy() или lazy()

React имеет механизм динамической загрузки под названием lazy(), который позволяет загружать компоненты в ленивом режиме.

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

Это очень полезно для минимизации скорости загрузки вашего приложения и уменьшения размера начального пакета.

Теперь мы рассмотрим функцию lazy() более подробно и узнаем, как она работает.

Базовый синтаксис lazy()

Чтобы использовать lazy(), вам необходимо выполнить следующие шаги:

Сначала импортируйте компоненты Suspense из React, а также все компоненты, которые вы собираетесь загружать лениво.

import { Suspense } from 'react';

Затем используйте lazy(), чтобы определить динамическую загрузку. Для компонента, которого вы хотите загружать медленно, эта функция принимает аргумент, который является функцией, возвращающей оператор динамической загрузки.

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

В этом случае, компонент LeoComponent будет загружен лениво, когда он понадобится. Динамический оператор import() указывает путь к импортируемому компоненту.

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

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

Здесь, пока загружается компонент LeoComponent, будет отображаться резервный компонент, указывающий, что контент загружается.

Преимущества React.lazy()

1. Повышенная скорость: Путем выборочной загрузки компонентов, необходимых для текущего представления, а не загрузки всех компонентов сразу, ленивая загрузка компонентов может повысить скорость работы приложения.
2. Улучшенный опыт пользователя: Вы можете улучшить опыт пользователя, информируя его, что приложение активно загружает материал, используя Suspense для отображения индикатора загрузки.
3. Разделение кода: Одно из основных преимуществ lazy() заключается в возможности разделения кода. Процесс разделения кода включает разделение кода вашего приложения на более мелкие, требуемые наборы. Это уменьшает размер начального набора и ускоряет время загрузки приложения.

С помощью lazy() вы можете разделять код и лениво загружать компоненты в ваших приложениях React. Это отличная функция. Это полезный инструмент для оптимизации производительности и времени загрузки веб-приложений, улучшения пользовательского опыта путем загрузки компонентов только при необходимости.

У него есть некоторые ограничения и определенные проблемы, но при правильном использовании он может быть полезным инструментом в вашем наборе инструментов для разработки на React.

3) Границы ошибок

Компоненты React, известные как границы ошибок, могут обнаруживать и управлять ошибками в своем поддереве. Поскольку они могут бережно обрабатывать любые проблемы, возникающие при ожидании асинхронных данных, они являются неотъемлемыми для работы с состоянием ожидания.

class ErrorBoundary extends React.Component {  componentDidCatch(error, info) {    // Обработка ошибки  }  render() {    return this.props.children;  }}

4) Что такое Concurrent Rendering?

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

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

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

Как работает React Suspense?

При использовании React Suspense с асинхронными операциями он следует этим шагам:

1. После загрузки React отрисовывает дерево компонентов.
2. Когда он встречает компонент Suspense, React проверяет, находятся ли некоторые дочерние компоненты в состоянии ожидания.
3. Если дочерний компонент ожидает данных (например, в результате импорта lazy() или получения данных), React отображает указанный запасной интерфейс до готовности данных.
4. Как только данные становятся доступными, React плавно переходит к отображению реального контента.

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

Варианты использования React Suspense

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

1. Получение данных

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

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

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

Установка границы ошибки и React Suspense

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

import React from 'react';class ErrorBoundary extends React.Component {  constructor(props) {    super(props);    this.state = { hasError: false };  }  static getDerivedStateFromError(error) {    return { hasError: true };  }  render() {    if (this.state.hasError) {      return <div>Ошибка: Что-то пошло не так!</div>;    }    return this.props.children;  }}export default ErrorBoundary;

Использование React Query для получения данных

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

import React from 'react';import { useQuery } from 'react-query';import ErrorBoundary from './ErrorBoundary';// Определите функцию для получения данныхasync function fetchData() {  const response = await fetch('https://api.example.com/data');  if (!response.ok) {    throw new Error('Сетевой ответ был некорректным');  }  return response.json();}function DataFetching() {  const { data, isLoading, isError } = useQuery('data', fetchData);  if (isLoading) {    throw new Promise((resolve) => setTimeout(resolve, 2000)); // Симуляция задержки загрузки  }  if (isError) {    throw new Error('Ошибка при получении данных');  }  return (    <div>      <h1>Получение данных с помощью React Suspense</h1>      <p>{data}</p>    </div>  );}function App() {  return (    <div>      <h1>Приложение Лео</h1>      <ErrorBoundary>        <React.Suspense fallback={<div>Загрузка...</div>}>          <DataFetchingComponent />        </React.Suspense>      </ErrorBoundary>    </div>  );}export default App;

В этом примере мы получаем данные с помощью хука useQuery из React Query. Чтобы отобразить индикатор загрузки, мы используем throw new Promise, чтобы имитировать задержку загрузки, если данные все еще загружаются (признак isLoading равен true). Мы выбрасываем ошибку, чтобы граница ошибок могла ее перехватить, если возникла проблема.

Вы можете указать бэкап-компонент, который будет отображаться во время загрузки, обернув компонент DataFetching в Suspense. В данном случае это простое сообщение “Загрузка…”.

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

Этот пример показывает, как React Suspense упрощает управление состоянием и получение данных, что приводит к более организованному и понятному коду.

Это примеры использования Suspense в ситуации получения данных в React.

2. Поздняя загрузка в React Suspense

Загрузка компонентов вашего приложения только по мере необходимости (поздняя загрузка, также известная как разделение кода) может снизить размер вашего начального пакета и ускорить загрузку вашего приложения React.

Вы можете использовать React.lazy() в сочетании с React Suspense, чтобы легко добавить позднюю загрузку в ваше приложение.

Вот как реализовать позднюю загрузку с помощью React Suspense:

Сначала импортируйте React Suspense из React:

import { Suspense } from 'react';

Затем создайте компонент с поздней загрузкой в вашем React-приложении. Для создания компонента, который загружается медленно, используйте метод React.lazy(). Укажите стрелочную функцию для динамического импорта компонента.

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

Затем оберните ваш компонент в Suspense. Оберните Suspense вокруг медленной части. Во время загрузки ленивого компонента можно указать индикатор загрузки или бэкап-компонент, который будет показан.

function App() {  return (    <div>      <h1>Приложение Лео</h1>      <Suspense fallback={<div>Загрузка...</div>}>        <LennyComponent />      </Suspense>    </div>  );}

Компонент может быть использован как любой другой компонент в вашем приложении React.

function LennyComponent() {  return <div>Этот компонент загружается лениво.</div>;}

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

Такая установка позволяет минимизировать размер начального пакета и ускорить загрузку вашего приложения на React, загружая только LazyComponent при необходимости. Во время загрузки компонента, пользователи увидят индикацию загрузки (в этом примере «Загрузка…»). Компонент загружается и отображается в приложении легко.

3. Лучший пользовательский опыт

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

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

import React, { Suspense } from 'react';// Компонент, который получает данныеconst fetchApiData = () => {  return new Promise((resolve) => {    setTimeout(() => {      resolve('Данные загружены!');    }, 2000); // Моделирование задержки в 2 секунды для получения данных  });};// Компонент, который использует Suspense для асинхронного получения данныхconst DataComponent = () => {  const apidata = fetchApiData(); // Это может быть любая асинхронная функция, например, вызов API  return <div>{apiData}</div>;};// Обернуть компонент с помощью Suspenseconst App = () => {  return (    <Suspense fallback={<LoadingSpinner />}>      <DataComponent />    </Suspense>  );};// Простой компонент спиннера загрузкиconst LoadingSpinner = () => {  return <div>Загрузка...</div>;};

В данном случае:

Метод fetchApiData используется компонентом DataComponent для получения данных. Имейте в виду, что хотя fetchApiData является довольно простой функцией, возвращающей промис, на практике это может быть вызовом API.

Компонент Suspense, требующий аргумент заглушки, инкапсулирует компонент App. Один компонент, который будет отображаться во время выполнения асинхронной операции, – это аргумент fallback. В данном случае это компонент LoadingSpinner.

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

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

Заключение

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

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

• Asynchronous
• React