乐闻世界logo
搜索文章和话题

React Router 是如何配置组件的懒加载?

浏览22
6月24日 16:43

React Router 可以通过配合 React 的 React.lazy()Suspense 组件来配置组件的懒加载。以下是使用 React Router 实现懒加载的基本步骤:

  1. 使用 React.lazy 实现动态导入: React.lazy() 是一个允许你动态加载组件的函数。它可以让你定义一个动态导入的组件,并且这个组件会在首次渲染时自动加载。

    jsx
    const LazyComponent = React.lazy(() => import('./LazyComponent'));
  2. 使用 Suspense 组件包裹路由: 在你的应用中,你需要使用 Suspense 组件来包裹懒加载的路由。Suspense 可以指定一个加载指示器(比如一个 spinner),它会在懒加载组件加载完成之前显示。

    jsx
    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import React, { Suspense } from 'react'; const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { return ( <Router> <Suspense fallback={<div>Loading...</div>}> <Switch> <Route path="/lazy" component={LazyComponent} /> {/* 其他路由 */} </Switch> </Suspense> </Router> ); }
  3. 为懒加载组件创建独立的 chunk: 当你使用 create-react-app 或其他构建工具时,它会为每个用 React.lazy() 引入的组件自动创建一个独立的 JavaScript chunk 文件。这意味着这些代码只会在用户需要时才会被加载。

举个例子,假设你有一个很大的组件 BigComponent,你不希望它在应用首次加载时就加载进来,而是希望当用户真正访问到该组件对应的路由时再加载,你可以这样设置:

jsx
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import React, { Suspense } from 'react'; const BigComponent = React.lazy(() => import('./BigComponent')); function App() { return ( <Router> <Suspense fallback={<div>Loading Big Component...</div>}> <Switch> <Route path="/big-component" component={BigComponent} /> {/* 其他路由 */} </Switch> </Suspense> </Router> ); }

在上述例子中,当用户访问 /big-component 路径时,BigComponent 会被动态加载。用户会看到 "Loading Big Component..." 的文本,直到 BigComponent 加载完成并准备好渲染。这样可以减少应用的初始加载时间,并且按需加载资源,提高性能。

标签:React前端