上节课我们介绍了关于setState的两种写法，这节课我们来介绍一下lazyLoad。

回顾

在开始这节课的内容之前，我们来对上节课的内容来做一个简单的回顾：

  • 第一种写法叫对象式setState
  • 第二种写法叫函数式setState
  • 对象式setState是函数式setState的一种简写方式
  • 如果修改状态要依赖原状态则使用函数式
  • 如果修改状态后要马上获取新状态，则传入callback

以上便是上节课的内容，接下来我们来介绍一下lazyLoad

什么是lazyLoad

见名知意，这个词叫做懒加载。这个东西是用于路由的，当我们一个项目组件很多，路由很多，那么我们所谓的懒加载是一定要开启的。

那么什么叫懒加载啊？就是用得时候再加载，否则就不加载。

我们来用过去那个学习router的案例来介绍一下，代码我就不贴了，我们来看一下页面：

image-20220120142019852

当我们进入到这个页面的时候，我们没有写重定向，所以说是不是什么都没看，按理说是不是这两个组件应该什么都没有挂载？但是事实上是这样吗？其实我们在打开网页的那一刻，呈现都通过网络请求来把所有的组件加载进来了。这样的话其实是很不好的，在第一次加载就会很慢。那么我们应该怎么处理呢？

import React, { Component, lazy } from 'react';
import { Route, Switch } from 'react-router-dom';
import MyNavLink from './components/MyNavLink';

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

其实很简单，我们不需要做什么乱七八糟的处理，只需要引入react中的lazy函数，然后用定义变量的形式来引入我们的组件，这样就能够实现懒加载，那么我们来试一下吧：

image-20220120143321043

报错了，这是为什么呢？这就是react考虑的一个问题了，就是说我们现在懒加载，得用户点什么才加载什么，而这个过程都是通过网络请求实现的，如果说网速特别慢，就是加载不出来的话，react将指定某一个组件来展示出来，但是我们没有做这一步操作，所以导致程序报错了。

那么我们应该这么处理呢？报错信息里面都告诉我们了，要用Suspense组件，那么我们来改一下吧：

<Suspense fallback={<h1>Loading...</h1>}>
  <Switch>
    <Route path="/about" component={About} />
    <Route path="/home" component={Home} />
  </Switch>
</Suspense>

我们来看代码，我们只需要用Suspense组件来包裹住路由注册的部分就可以了，而且我们给fallback指定了一个虚拟DOM，这里也可以写一个组件。那么我们来看一下效果：

image-20220120144222381

现在我们把所有窦娥网路请求都清空，然后我们点击About和Home:

image-20220120144430218

点击了两次导航，然后发出了两次网络请求，那么这个时候我们再回头点About：

image-20220120144523474

这次就没有对组件的请求了。那么我们在控制台中来改一下我们的网速为fast3G，这就相当于一个3G网络，我们再来看一下：

image-20220120144753473

这个时候网速慢，就出现了我们之前写的虚拟DOM。以上便是路由的懒加载

总结

  • 项目开发中基本都要开启懒加载
  • 使用lazy函数来调入路由组件实现懒加载
  • 注册路由时要用Suspense组件包裹
  • Suspense标签要指定一个不使用懒加载的组件作为fallback属性

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/extend_lazy_load_component/