React新特性之layz和Suspense实现延迟加载

layz和Suspense实现延迟加载

import React, { Component, lazy ,Suspense} from 'react';
import './App.css';
// lazy的返回值就是一个react组件
const About= lazy(()=>import("./about.jsx"));
// ErrorBoundary错误拼接，是一个捕获渲染后台错误的组件
class App extends Component {
  state={
    hasError:false
  }
// 利用生命周期函数componentDidCatch方法实现
 /*  componentDidCatch(){
    this.setState({
      hasError:true
    })
  } */
  // 也可以用一个静态方法
  static getDerivedStateFromError(){
    // 这个方法返回的是一个新的state数据，会合并到新的state中
    return {
      hasError:true
    }
  }
  render() {
    if (this.state.hasError){
      return <div>error</div>
    }
    return (
      // fallback的值是一个jsx
      // Suspense没有办法处理加载失败的情况
      <div>
        <Suspense fallback={<div>loading</div>}>
        <About></About>
        </Suspense>
      </div>
    )
  }
}
export default App

import React,{Component} from 'react';
 export default class About extends Component{
    render(){
        return(
            <div>About</div>
        )
    }
}