lazy&Suspense 基本使用

JS 模塊延時加載，做代碼拆分

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

// 這里使用 webpackChunkName 可以自定義 chunk 的名稱方便調(diào)試
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 的名稱方便調(diào)試
const Detail = lazy(() => import(/* webpackChunkName: "LoadingDetail" */'./Detail'))

class App extends Component {

  state = {
    hasError: false
  }

  // 組件加載出錯會調(diào)用的生命周期
  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 的名稱方便調(diào)試
const Detail = lazy(() => import(/* webpackChunkName: "LoadingDetail" */'./Detail'))

class App extends Component {

  state = {
    hasError: false
  }

  // 一旦出現(xiàn)錯誤，就會返回一個新的 state 數(shù)據(jù)并且合并到現(xiàn)有的 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