Чрез асинхронни компоненти можем да заредим важни и съществени компоненти в браузъра.

Асинхронното не трябва да бъде само извличане на данни, то може да се приложи към код или компоненти. Чрез асинхронни компоненти можем да заредим важни и съществени компоненти в браузъра. По-малко важните компоненти могат да бъдат бавно заредени и рендирани. С React тази концепция е вградена и предоставя редица API за това.

Мързеливото зареждане на React компоненти може:

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

API на Suspense на React ви позволяват да управлявате асинхронното зареждане на компоненти в потребителския интерфейс. Позволява на компонентите да „изчакат“ нещо преди рендиране.

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. Използване на API на Intersection Observer

API на React.Suspense не поддържат мързеливо извличане на данни. С помощта на Intersection Observer API можем да извличаме данни под капака само ако компонентът е във видимостта. По този начин можем да намалим времето за зареждане отново в допълнение към мързеливото зареждане, ние също сме мързеливи при извличането на компонента. Можем също да използваме същия принцип за предоставяне на данни за компонента.

За да използваме API на Intersection Observer, можем да създадем наблюдател, както е показано по-долу:

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:



Разделяне на код – React
Повечето приложения на React ще имат своите файлове, „обединени“ с помощта на инструменти като Webpack, Rollup или Browserify. Групирането е процесът...reactjs.org



Повече съдържание в PlainEnglish.io. Регистрирайте се за нашия безплатен седмичен бюлетин. Следвайте ни в Twitter, LinkedIn, YouTube и Discord . Интересувате ли се от Growth Hacking? Вижте Circuit.