React系列-Suspense与路由懒加载

admin 2025年1月16日23:37:38评论6 views字数 2080阅读6分56秒阅读模式

lazy内置方法 Suspense内置组件

  • lazy是React提供的懒(动态)加载组件的方法,React.lazy()

  • 能减少打包体积、延迟加载首屏不需要渲染的组件

  • 依赖内置组件Suspense:给lazy加上loading指示器组件的一个容器组件

  • Suspense目前只和lazy配合实现组件等待加载指示器的功能

  • React.lazy 接受一个函数,这个函数需要动态调用 import()。它必须返回一个 Promise,该 Promise 需要 resolve 一个 default export 的 React 组件。所以要用类返回render而不是函数

App.jsx

import React from 'react';
import ReactDOM from 'react-dom'
import Loading from './Loading';

const MyMain = React.lazy(() => import('./main.jsx'));

function App() {
return (
<div>
{/* 注意 fallback这里是组件 */}
<React.Suspense fallback={<Loading />}>
<MyMain />
</React.Suspense>
</div>

)
}


export default App;

ReactDOM.render(
<App/>,
document.getElementById('root')
)


Loading.jsx

export default function Loading() {
return (
<div>
<h1>Loading...先出现</h1>
<h1>Loading...先出现</h1>
<h1>Loading...先出现</h1>
</div>

)
}

main.jsx

import React from 'react';

// React.lazy 接受一个函数,这个函数需要动态调用 import()。
// 它必须返回一个 Promise,该 Promise 需要 resolve 一个 default export 的 React 组件。
export default class Main extends React.Component {
render() {
return (
<div>
这里是main.js所 显示 的 内容(延迟加载出来的)
</div>

)
}
}

路由懒加载

yarn add [email protected] [email protected]

各个文件相对路径:

src
├── App.jsx
├── Loading.jsx
├── index.js
└── views
├── 1.js
├── 2.js
└── 3.js

Loading.js

export default function Loading() {
return (
<div>
<h1>Loading...先出现</h1>
<h1>Loading...先出现</h1>
<h1>Loading...先出现</h1>
</div>

)
}

2.js(其他几个类似)

import React,{Component} from 'react';

class Page2 extends Component{
render(){
return (
<p>
Page2
</p>

)
}
}
export default Page2;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import App from './App';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
,
document.getElementById('root')
);

APP.jsx:

import React ,{Suspense,lazy}from 'react';
import ReactDOM from 'react-dom'
import Loading from './Loading';
import { BrowserRouter ,Switch, Route} from 'react-router-dom'

function App() {
return (
<div>

<Suspense fallback={<Loading />}>
<div>
<Switch>
<Route path='/page1' component={lazy(()=>import('./views/1'))}/>
<Route path='/page2' component={lazy(()=>import('./views/2'))}/>
<Route path='/page3 ' component={lazy(()=>import('./views/3'))}/>
</Switch>
</div>
</Suspense>
</div>

)
}

export default App;

原文始发于微信公众号(迪哥讲事):React系列-Suspense与路由懒加载

免责声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由读者承担全部法律及连带责任,本站不承担任何法律及连带责任;如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截,联系方式见首页),望知悉。
  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2025年1月16日23:37:38
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   React系列-Suspense与路由懒加载https://cn-sec.com/archives/1081237.html
                  免责声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由读者承担全部法律及连带责任,本站不承担任何法律及连带责任;如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截,联系方式见首页),望知悉.

发表评论

匿名网友 填写信息