【REACT-lazy路由懒加载和组件懒加载】

1. 路由懒加载

import React, { Component,lazy,Suspense } from 'react'
import {HashRouter as Router,Route,Redirect,Switch} from 'react-router-dom'
const films = lazy(()=>import('../views/Films'))
const Cinemas = lazy(()=>import('../views/Cinemas'))
const Center = lazy(()=>import('../views/Center'))
const Detail = lazy(()=>import('../views/Detail'))
const Login = lazy(()=>import('../views/Login'))
const NotFound = lazy(()=>import('../views/NotFound'))

function isAuth(){
  return window.localStorage.getItem('token')
}

//BrowserRouter 地址不含# ，好看，会向后端发送请求要页面，如果后端没有对应的路径处理，就会报404错误
export default class IndexRouter extends Component {
  render() {
    return (
      <div>
        <Router>
          {this.props.children}
          <Suspense fallback={<h2>加载中...</h2>}>
            <Switch>
              <Route path="/films" component={films}/>
              <Route path="/cinemas" component={Cinemas}/>

              <Route path="/center" render={()=>{
                return isAuth() ? <Center/> : <Redirect to="/login"/>
              }}/>
              <Route path="/login" component={Login}/>

              <Route path="/detail/:id" component={Detail}/>
              {/* <Route path="/detail" component={Detail}/> */}

              {/* 模糊匹配，刷新页面后都会匹配到路径/*/}
              <Redirect from="/" to="/films" exact/>

              <Route component={NotFound}/>
            </Switch>
          </Suspense>
          
        </Router>
      </div>
    )
  }
}

2. 组件懒加载

import React, { Component,lazy, Suspense } from 'react'
const Nowplaying = lazy(()=>import('./components/Nowplaying'))
const Commingsoon = lazy(()=>import('./components/Commingsoon'))

export default class App extends Component {
  state = {
    type:1,
  }
  render() {
    return (
      <div>
        <button onClick={()=>{
          this.setState({type:1});
        }}>正在热映</button>

        <button onClick={()=>{
          this.setState({type:2});
        }}>即将上映</button>
        <Suspense fallback={<div>正在加载中。。。</div>}>
          {
            this.state.type ===1?
            <Nowplaying></Nowplaying>
            :
            <Commingsoon></Commingsoon>
          }
        </Suspense>
        
      </div>
    )
  }
}