在React中,我們可以使用React.lazy()
和Suspense
來實現組件的懶加載。為了處理加載狀態,我們可以使用以下方法:
React.lazy()
創建一個異步組件:import React, { lazy, Suspense } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));
Suspense
包裹懶加載的組件,并使用一個加載狀態變量(例如loading
)來跟蹤加載狀態:import React, { useState, Suspense } from 'react';
function App() {
const [loading, setLoading] = useState(true);
return (
<div className="App">
{loading ? (
<p>Loading...</p>
) : (
<Suspense fallback={<p>Loading...</p>}>
<MyComponent />
</Suspense>
)}
</div>
);
}
export default App;
在這個例子中,我們首先使用useState
創建一個名為loading
的狀態變量,并將其初始值設置為true
。然后,在App
組件中,我們使用Suspense
包裹懶加載的MyComponent
。fallback
屬性用于在組件加載過程中顯示一個加載占位符。
當MyComponent
開始加載時,loading
狀態變量將保持為true
,并顯示加載占位符。一旦組件加載完成,loading
狀態變量將更新為false
,并顯示懶加載的組件。
這就是在React中使用懶加載處理加載狀態的方法。