第二十七章：懒加载

组件懒加载

React自带的React.lazy()方法

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

export default class App extends Component {
  state = {
    tab: 1
  }
  render() {
    return (
      <div>
        <div>
          <button onClick={() => {
            this.setState({
              tab: 1
            })
          }}>正在热映</button>
          <button  onClick={() => {
            this.setState({
              tab: 2
            })
          }}>即将上映</button>
        </div>
        <Suspense fallback={ <div>正在加载中...</div>}>
        {this.state.tab === 1 ? <Comingsoon></Comingsoon> : <Playing></Playing>}
        </Suspense>
      </div>
    )
  }
}