面试 - react路由懒加载

1. 为什么需要路由懒加载？

  因为在页面首次加载时会将所有路由组件都加载，会导致首屏加载缓慢

2. 懒加载用到啥？

1. lazy是个高阶函数,接收一个函数。
2. 结合Suspense使用，因为现用现载会有延迟空白，所以放一个早就加载好的组件；

import React, { Component, lazy, Suspense } from "react";
import { NavLink, Route } from "react-router-dom";

//----------------这样写，在页面首次加载时会将所有路由组件都加载；-------------------------
// import About from "./pages/About";
// import Home from "./pages/Home";

//--------------------------路由懒加载（现点现加载）----------------------------------
// 1. lazy是个高阶函数,接收一个函数。
// 2. 结合Suspense使用，因为现用现载会有延迟空白，所以放一个早就加载好的组件；
//    <Suspense  fallback={<h1>loading</h1>}><Route/>...<Suspense>

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

export default class App extends Component {
  render() {
    return (
      <div>
        <div>
          <NavLink to="/about">关于</NavLink>
          <NavLink to="/home">Home</NavLink>
        </div>
        <div>
          <Suspense fallback={<h1>loading</h1>}>
            <Route path="/about" component={About}></Route>
            <Route path="/home" component={Home}></Route>
          </Suspense>
        </div>
      </div>
    );
  }
}