React Componentləri üçün Lazy load( React Suspense və React Suspense komponentini manual yaratmaq).

İlk öncə Lazy loadın nə olduğunu bilməliyik. Lazy load, yüksək vizual sıxlığı və səhifə uzunluğu olan saytlarda səhifələrin açılış sürətini artıracaq bir üsuldur.

Reactda məlum olduğu üzrə Routing istifadə etdiyimizdə belə bütün componentlər bizim bundle.js faylımız ilə birlikdə browserimizə yüklənir. Bunun qarışını almaq üçün React 16.6 ilə birlikdə bizə React Suspense componenti gəlmişdir. İstifadəsi aşağıdakı şəkildədir.

React router dom vasitəsi ilə 3 səhifədən ibarət bir react appı yaradar.

“/” üçün Welcome componenti

import React from 'react';
const welcome = props => (
 <div>
  <h1>The Welcome Page</h1>
 </div>
);
export default welcome;

“/user” üçün user componenti

import React from 'react';
const user = props => (
 <div>
  <h1>The User Page</h1>
 </div>
);
export default user;

“/post” üçün post componenti

import React from 'react';
const posts = props => (
 <div>
  <h1>The Posts Page</h1>
 </div>
);
export default posts;

Sonra App.js faylında rootları təyin edək.

Gördüyünüz kimi çox sadə bir routu olan bir app yaratdıq. İndi isə gəlin post faylına React Suspenseni tətbiq edək.

Bunun üçün ilk öncə React.lazy() funksiyası istifadə edəcəyik. Bu funksiya əslində bir HOC dur yəni Higher order componentdir. Biz bu React.lazy() vasitəsi ilə istədiyimiz komponenti yəni post componentini App.js faylına import edirik. Yəni normal import Post from “adres” yerinə

const Posts = React.lazy(()=>{
return import(‘./containers/Posts’)
})

istifadə edirik. ( React Suspense componenti yaratdığımızda niyə bu formada import etdiyimizi tam şəkildə anlayacaqsınız)

Daha sonra isə Suspense compoentini react ilə birlikdə import edirik. Yəni

import React, { Suspense } from ‘react’;

Daha sonra Route componentində təyin etdiymiz compontent={Posts} u dəyişəcəyik. Normalda /posts routesinə keçdikdə Posts componentinin render olmağı üçün

<Route path="/posts" component={Posts} />

Şəklində istifadə edirdik. React suspensedə isə istifadəsi aşağıdakı kimidir.

İlk component əvəzinə render={()=>{}} istifadə edəcəyik.

<Route path="/posts" render={()=> {
 return (
  <Suspense>
   <Posts/>
  </Suspense>
 )
}} />

Burada render methodu ilə Suspense componentdini onun daxilində isə Posts componentimiizi return edirik və beləliklə biz lazy load məsələsini həll etmiş olduq.

👽Tip: Bəs biz bu component load olan zaman ekranda Loading.. yazısı və ya başqa bir Loading componenti göstərmək üçün nə etməliyik? React Suspense ilə bu çox sadədir. Bunun üçün Suspense componentinə fallback methodu təyin etmək kifayətdir. Nümunə aşağıdakı kimi olur.

<Route path="/posts" render={()=> {
 return (
  <Suspense fallback={ <div>Loading........</div>} >
   <Posts/>
  </Suspense>
 )
}} />

Yəni Posts componenti yüklənənə qədər biz Loading.. yazısını görəcəyik.

Bəs Suspense işlətməməklə işlətmək arasındakı fərqi necə görək?

Bunun üçün browserimizin network tabına baxsaq kifayət edər.

React Suspense ilə

React Suspense istifadə edilmədən.

İndi isə React Suspense komponentini anlamaq üçün onu 0 dan yaradaq.

Bunun üçün yeni bir file açaq (Mən adını uyğun olaraq Suspense qoyacam siz istədiyinizi qoya bilərsiniz.)

SRC folderi daxilində bir suspense.js faylı yaradıram.

Unutmayınki bu component asinxron bir higher order componentdir.

Bu higher order componenti yaratmaq üçün bir funksiya yaradırıq və onun içərisində class based bilinməyən react komponnentini return edirik. Yəni:

import React, { Component } from 'react'
const asynsSuspenseComponent = (importComponent) =>{
 return class extends Component {
 } 
}
export default asynsSuspenseComponent

daha sonra bu Componentə import edilən componenti tutmaq üçün state təyin edirik.

state={
component:null
}

Və reactin life-cycle methodlarından istifadə edəcəyik.

Burada componentDidMount funksiyası istifaədə edili.

componentDidMount(){
importComponent()
.then(cmpnt=>{
this.setState({component:cmpnt.default})
})
}

Yəni yaratdığımız suspense funksiyssı mount edilən zaman importComponent() işə salınsın və onun bizə gətirdiyi digər komponunti statemizdəki component iteminə təyin etsin. Daha sonra isə render(){}ilə omu return edək

render(){
const returnedComponent = this.state.component
return returnedComponent ? <returnedComponent {...this.props} /> : null;
}

Burada conditional (şərti) return istifadə edirik. Əgər statemizdə component itemi boş deyilsə bunu return edirik.

Ən sonda isə export default asynsSuspenseComponent ilə funksiyamızı export edirik.

İndi bu funksiyanı işlədəcəyimiz yerə yəni App.js faylına gələk.

Görəcəyimiz ilk iş suspense faylını saytımıza daxil etməkdir.

import suspense from ‘./containers/suspense’

👽Qeyd: əgər componentinizi export default şəklində export edirsinizsə onu başqa fayllara daxil etdikdə istədiymiz adla adlandıra bilərik.

Daha sonra Reactın öz suspense componentinə olduğu kimi Lazy loadı tətbiq etmək istədiyimiz componenti aşağıdakı şəkildə import edirik

const AsyncPost = suspense(()=>{
return import(‘./containers/Posts’)
})

Daha sonra isə Route vasitəsi ilə onu təyin edirik yəni

<Route path=”/posts” component={AsyncPost} />

Və artıq özümüzün yaratdığımız React Suspense componenti var.

Bu məqalənin fayllarına Github repomdan baxa bilərsiniz.