我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

本文描述react里面的懒加载,懒加载一般都是出于对最终的bundle体积方面考虑的。如果不考虑体积大加载慢等因素的话,还是可以按照往常的写法写的。本文中的懒加载就是个增益项目。

苏南大叔:react教程,如何使用懒加载lazy和Suspense? - lazy-hero
react教程,如何使用懒加载lazy和Suspense?(图4-1)

苏南大叔的程序如此灵动博客,记录苏南大叔的代码故事。本文描述react项目的懒加载lazySuspense。测试环境:create-react-app@5.0.1react@18.2.0react-dom@18.2.0node@16.14.2

lazy

lazy懒加载,允许开发者按需加载组件,即只有在需要时才加载组件的代码。这种方式可以减少页面的初始加载时间,提高页面的响应速度和性能。

import React, { Component, Suspense, lazy } from 'react';

一般都是把import部分(本文中是Child组件)给lazy掉,下面是几种写法:

const LazyChild = lazy(() => import('./Child'));
import Child from './Child';
const LazyChild = lazy(() => new Promise((resolve) => {
  resolve({ default: () => <Child /> })
}));

下面的是个带Timeout的更好的效果的代码(仅仅是用于模拟网络延迟):

const LazyChild = lazy(() => new Promise((resolve) => {
    setTimeout(() => {
        resolve({ default: () => <Child /> })
    }, 3000)
}));

苏南大叔:react教程,如何使用懒加载lazy和Suspense? - lazy
react教程,如何使用懒加载lazy和Suspense?(图4-2)

Suspense

import React, { Component, Suspense, lazy } from 'react';
<Suspense fallback={<div>加载中</div>}>
  <LazyChild /> 
</ Suspense>

Suspensefallback属性是用于显示过渡内容的。注意拼写,是fallback不是callback

苏南大叔是这么理解的:fallback是目标事件发生之前,callback是目标事件发生之后。

苏南大叔:react教程,如何使用懒加载lazy和Suspense? - suspense
react教程,如何使用懒加载lazy和Suspense?(图4-3)

完整代码

Child.js:

import img from './png.png';
const Sunan = () => {
  return (<div><img src={img}/></div>)
}
export default Sunan;

这里需要一个图片文件./png.png,自行准备。

苏南大叔:react教程,如何使用懒加载lazy和Suspense? - 加载图片
react教程,如何使用懒加载lazy和Suspense?(图4-4)

App.js:

import React, { Component, Suspense, lazy } from 'react';
import Child from './Child';
// const LazyChild = lazy(() => import('./Child'));
// const LazyChild = lazy(() => new Promise((res) => {
//   res({
//     default: () => <Child />
//   })
// }));
const LazyChild = lazy(() => new Promise((res) => {
  setTimeout(() => {
    res({
      default: () => <Child />
    })
  }, 2000)
}));
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false
    }
  }
  render() {
    const { show } = this.state
    return <div>
      <button onClick={() => this.setState({ show: true })} >显示图片</button>
      {
        show &&
        <Suspense fallback={<div>加载中</div>}>
          <LazyChild />
        </ Suspense>
      }
    </div>
  }
}
export default App;

结束语

这个编辑器第一次出现不显示代码的bug</S 标签被隐藏,待后续调试。

更多react经验文章,请点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react