腳本之家服務器常用軟件

快捷導航

React利用lazy+Suspense實現(xiàn)路由懶加載

更新時間：2023年06月30日 11:08:28 作者：＊且聽風吟

這篇文章主要為大家詳細介紹了React如何利用lazy+Suspense實現(xiàn)路由懶加載，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起了解一下

文檔

React lazy、Suspense 官方文檔

進入頁面后，組件的內(nèi)容會通過 http 請求到對應的組件文件，當路由中有較多的頁面時，會出現(xiàn)一個問題，那就是一次性將所有的組件都加載了，浪費性能，所以可以通過懶加載的形式來處理。

src/router/routes.ts，使用 react 的 lazy 進行按需引入：

import { lazy, LazyExoticComponent } from 'react'
export interface RouteType {
  path: string
  component: LazyExoticComponent<any>
  title?: string
  exact?: boolean
}
const routes: RouteType[] = [
  {
    path: '/',
    component: lazy(() => import('@/views/home/HomePage'))
  },
  {
    path: '/demo/index',
    component: lazy(() => import('@/views/demo/DemoIndex'))
  },
  {
    path: '/demo/popup',
    component: lazy(() => import('@/views/demo/DemoPopup'))
  }
]
export default routes

react 的 lazy 按需引入必須搭配 Suspense 才能實現(xiàn)懶加載過程，在 src/router/components/AppRouter.tsx 中引入創(chuàng)建的路由表：

import React, { Suspense } from 'react'
import { Router, Route, Switch } from 'react-router-dom'
import { createBrowserHistory, History } from 'history'
import RouteLoading from './RouteLoading'
import routes, { RouteType } from '../routes'
import { BASE_PATH } from '@/globalConstants'
const history: History = createBrowserHistory()
const AppRouter = () => { 
  const AppRoutes = routes.map((route: RouteType) => 
    <Route exact={route.exact === false ? false : true} path={`${BASE_PATH}${route.path}`} render={(props: any) => <route.component {...props} />} key={route.path} />
  )
  return (
    <Router history={history}>
      <Suspense fallback={<RouteLoading />}>
        <Switch>{AppRoutes}</Switch>
      </Suspense>
    </Router>
  )
}
export default AppRouter

src/router/components/RouteLoading.js ：

import React from 'react'
import { UuiLoading } from 'uui-web-react'
export default function() {
  return <UuiLoading />
}

Suspense 的 fallback 屬性可以是一個組件，該組件的引入不需要使用 lazy()，直接引入即可。

src/router/index.tsx ：

export { default as AppRouter } from './components/AppRouter'
export { default as routes } from './routes'

其中，引用到了 globalConstants.ts 中定義的路由常量 BASE_PATH ，src/globalConstants.ts：

// 獨立運行的路由要與配置文件保持一致
export const PUBLIC_PATH = '/uui-utils'
export const BASE_PATH = PUBLIC_PATH

App.tsx ：

import React from 'react'
import { AppRouter } from './router'
const App = () => {
  return <AppRouter />
}
export default App

總結(jié)：

Lazy 和 Suspense 都是 react 暴露的 api，在使用時需要注意：

Lazy 是個高階函數(shù)，接收一個函數(shù)形參，最終返回一個組件，形參中函數(shù)固定格式：

() => { return import('../../pages/Home/index')};

可以簡寫為：

const Home = lazy(() => import('../../pages/Home/index'))

使用 lazy 進行路由懶加載后，每次點擊 Link 后，再去請求相關(guān)的組件，那這個請求是會耗時間的。在網(wǎng)速比較慢的情況下，會出現(xiàn)路由視圖白屏的情況，所以使用 Suspense 標簽包裹注冊的路由來進行白屏時的頁面展示。

Suspense 標簽接收一個屬性 fallback，fallback 指定一個組件或者 jsx 代碼塊，來展示當請求對應組件，界面白屏時所展示的內(nèi)容。

到此這篇關(guān)于React利用lazy+Suspense實現(xiàn)路由懶加載的文章就介紹到這了,更多相關(guān)React路由懶加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React利用lazy+Suspense實現(xiàn)路由懶加載

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具