Как обращаться с динамическими и асинхронными компонентами в React

С помощью асинхронных компонентов мы можем загружать в браузер важные и важные компоненты.

Асинхронность не обязательно должна быть только выборкой данных, ее можно применять к коду или компонентам. С помощью асинхронных компонентов мы можем загружать в браузер важные и важные компоненты. Менее важные компоненты могут загружаться и визуализироваться медленно. В React эта концепция встроена и предоставляет для этого ряд API.

Ленивая загрузка компонентов React может:

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

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

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

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

Чтобы динамически загрузить компонент LazyComponent.js, нам потребуется динамически импортировать и загрузить его, как показано ниже.

import { lazy } from 'react';
...
const LazyLoadComponent = lazy(() => import('./LazyComponent');

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

const LazyLoadComponent = lazy(() => import('./LazyComponent')
  .then(
     module => ({ default: module.Content })
  )
);

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

2. Использование React.Suspense

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

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

import { lazy, Suspense } from 'react;
const Content = lazy(() => import("./Content"));
export const AppComponent = () => (
   <Suspense fallback={<div>Loading...</div>}>
      <Content cost={COST} />
   </Suspense>
);

Несколько компонентов также могут быть вложены в один файл Suspense.

3. Использование Intersection Observer API

API-интерфейсы React.Suspense не поддерживают ленивую выборку данных. С помощью Intersection Observer API мы можем внутренне извлекать данные только в том случае, если компонент входит в видимость. Таким образом, мы можем снова сократить время загрузки в дополнение к ленивой загрузке, мы также лениво загружаем компонент. Мы также можем использовать тот же принцип для предоставления данных для компонента.

Чтобы использовать Intersection Observer API, мы можем создать наблюдателя, как показано ниже:

const options = {
  root: null,
  rootMargin: '750px',
  threshold: 1.0,
};
const observer = new IntersectionObserver(callback, options);
observer.observe(targetElement);

Мы также можем использовать пакет react-intersection-observer npm, который использует API для предоставления хуков, реквизитов и т. д. для вашего приложения React.

Узнайте больше о разделении кода в приложениях React:

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.