lazy&Suspense 基本使用

JS 模块延时加载，做代码拆分

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

// 这里使用 webpackChunkName 可以自定义 chunk 的名称方便调试
const Detail = lazy(() => import(/* webpackChunkName: "LoadingDetail" */'./Detail'))

class App extends Component {
  render () {
    return (
      <div>
        <Suspense fallback={<div>Loading</div>}>
          <Detail></Detail>
        </Suspense>
      </div>
    )
  }
}

export default App

使用 React生命周期 拦截组件加载失败

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

// 这里使用 webpackChunkName 可以自定义 chunk 的名称方便调试
const Detail = lazy(() => import(/* webpackChunkName: "LoadingDetail" */'./Detail'))

class App extends Component {

  state = {
    hasError: false
  }

  // 组件加载出错会调用的生命周期
  componentDidCatch () {
    this.setState({
      hasError: true
    })
  }

  render () {
    if (this.state.hasError) {
      return <div>加载出错</div>
    }
    return (
      <div>
        <Suspense fallback={<div>Loading</div>}>
          <Detail></Detail>
        </Suspense>
      </div>
    )
  }
}
export default App

使用 getDerivedStateFromError() 拦截组件加载失败

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

// 这里使用 webpackChunkName 可以自定义 chunk 的名称方便调试
const Detail = lazy(() => import(/* webpackChunkName: "LoadingDetail" */'./Detail'))

class App extends Component {

  state = {
    hasError: false
  }

  // 一旦出现错误，就会返回一个新的 state 数据并且合并到现有的 state 中
  static getDerivedStateFromError () {
    return {
      hasError: true
    }
  }

  render () {
    if (this.state.hasError) {
      return <div>加载出错</div>
    }
    return (
      <div>
        <Suspense fallback={<div>Loading</div>}>
          <Detail></Detail>
        </Suspense>
      </div>
    )
  }
}
export default App