react lazyLoad怎樣處理加載狀態(tài)

小樊
81
2024-10-16 00:25:54

在React中，我們可以使用React.lazy()和Suspense來(lái)實(shí)現(xiàn)組件的懶加載。為了處理加載狀態(tài)，我們可以使用以下方法：

  1. 使用React.lazy()創(chuàng)建一個(gè)異步組件：
import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));
  1. 在主組件中使用Suspense包裹懶加載的組件，并使用一個(gè)加載狀態(tài)變量（例如loading）來(lái)跟蹤加載狀態(tài)：
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;

在這個(gè)例子中，我們首先使用useState創(chuàng)建一個(gè)名為loading的狀態(tài)變量，并將其初始值設(shè)置為true。然后，在App組件中，我們使用Suspense包裹懶加載的MyComponent。fallback屬性用于在組件加載過(guò)程中顯示一個(gè)加載占位符。

當(dāng)MyComponent開(kāi)始加載時(shí)，loading狀態(tài)變量將保持為true，并顯示加載占位符。一旦組件加載完成，loading狀態(tài)變量將更新為false，并顯示懶加載的組件。

這就是在React中使用懶加載處理加載狀態(tài)的方法。

0 踩