React 新特性 lazy&Suspense 及相关错误处理

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 (
      

        Loading
}>
          
        
      

) } } 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 
加载出错
    }
    return (
      

        Loading
}>
          
        
      

) } } 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 
加载出错
    }
    return (
      

        Loading
}>