React.js Lazy Loading: DIJELASKAN-tutorial js-php.cn

Panduan Lengkap dengan Helaian Penipuan dan Contoh

Pengenalan Ringkas

Lazy loading ialah teknik pengoptimuman prestasi yang berkesan dalam pembangunan web, terutamanya dengan perpustakaan dan rangka kerja seperti React. Ia melibatkan memuatkan komponen atau sumber hanya apabila diperlukan, sama ada sebagai tindak balas kepada tindakan pengguna atau apabila elemen akan dipaparkan pada skrin. Ini boleh mengurangkan masa muat awal aplikasi, mengurangkan penggunaan sumber dan meningkatkan pengalaman pengguna, terutamanya pada peranti dengan prestasi terhad atau sambungan internet yang perlahan.

Bagaimana Lazy Loading Berfungsi dalam Reaksi

React melaksanakan pemuatan malas terutamanya melalui fungsi React.lazy. Ia sering digunakan dalam kombinasi dengan React.Suspense, yang mengendalikan keadaan pemuatan dan UI sandaran. Di bawah ialah langkah utama untuk memahami cara melaksanakan pemuatan malas dalam aplikasi React.

React.js Lazy Loading: EXPLAINED
1. Import Dinamik dengan React.lazy

React.lazy mendayakan import dinamik komponen hanya apabila diperlukan. Hasilnya ialah janji yang diselesaikan kepada modul yang mengandungi komponen React lalai.

const DelayedComponent = React.lazy(() => import('./DelayedComponent'));

Salin selepas log masuk

Dalam contoh ini, DelayedComponent dimuatkan hanya apabila React cuba untuk memaparkannya buat kali pertama.

2. Membungkus dengan React.Suspense

Untuk mengendalikan keadaan pemuatan, React.Suspense digunakan untuk membalut komponen yang dimuatkan dengan malas. Ini membolehkan anda memaparkan kandungan sandaran (cth., pemutar pemuatan) semasa komponen sedang dimuatkan.

import React, { Suspense } from 'react'; function App() { return (  Loading content...
}>

); }

Salin selepas log masuk

Dalam coretan di atas, menunggu DelayedComponent dimuatkan sebelum memaparkannya. Jika memuatkan mengambil masa, pengguna akan melihat "Memuatkan kandungan...".

Dengan pemuatan malas, pengendalian ralat adalah penting sekiranya berlaku kegagalan (mis., gangguan rangkaian). Anda boleh memaparkan mesej ralat atau komponen sandaran jika berlaku masalah semasa proses pemuatan.

Pemuatan malas amat berguna dalam konteks penghalaan, di mana skrin atau komponen berbeza dimuatkan berdasarkan URL. Dengan penghala seperti React Router, anda boleh menggunakan React.lazy untuk memuatkan komponen secara dinamik bagi setiap laluan.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import React, { Suspense } from 'react'; const HomeView = React.lazy(() => import('./HomeView')); const AboutView = React.lazy(() => import('./AboutView')); function App() { return ( Loading views...