如何在React中實(shí)現(xiàn)內(nèi)容的懶加載和預(yù)加載

在React中實(shí)現(xiàn)內(nèi)容的懶加載和預(yù)加載可以使用React.lazy()和React.Suspense組件。

1. 懶加載：使用React.lazy()來(lái)動(dòng)態(tài)加載組件，只有當(dāng)組件被渲染時(shí)才會(huì)加載。例如：

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

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

2. 預(yù)加載：可以使用React.lazy()結(jié)合React.Suspense組件來(lái)實(shí)現(xiàn)預(yù)加載，即在需要渲染懶加載組件之前提前加載組件。例如：

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

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

// 提前加載LazyComponent
const PreloadComponent = React.lazy(() => import('./LazyComponent'));

在上面的例子中，當(dāng)App組件渲染時(shí)會(huì)先預(yù)加載LazyComponent組件，然后當(dāng)需要渲染LazyComponent時(shí)會(huì)直接使用預(yù)加載的組件。

需要注意的是，React.lazy()只能用于動(dòng)態(tài)引入默認(rèn)導(dǎo)出的組件，如果要引入命名導(dǎo)出的組件可以使用import()方法。

另外，React.Suspense組件用于在懶加載組件加載完成前顯示loading狀態(tài)，可以自定義fallback屬性來(lái)顯示loading狀態(tài)。