欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react Lazy与Suspense实现延迟加载(懒加载)

程序员文章站 2022-05-29 12:05:38
...
import React, { Component, lazy, Suspense } from 'react'

const About = lazy(() => import('./About.jsx'));
//lazy是一个方法,它封装了“动态加载的过程”
//About是一个React组件,但它并不能被渲染,它只是一个“动态加载过程”的封装。它在要被渲染的时候就会去加载真正的About组件

export default class IndexPage extends Component {
  state = {
    hasError: false
  }
  //Error boundaries,中文意为错误边界。我们希望部分UI的错误不会导致整个程序的崩溃,以及希望在错误发生时能够显示对应的UI
  //Error boundaries方法一
  componentDidCatch() {
    //如果 render() 函数抛出错误,就会触发componentDidCatch,也就是当组件加载失败,就会使用该函数
    this.setState({ hasError: true })
  }

  //Error boundaries方法二
  static getDerivedStateFromError() {
    //getDerivedStateFromError为静态函数
    //运行时间点:子组件被渲染发生错误之后且也页面更新之前
    return {
      hasError: true
    }
    // 返回的值会自动 调用setState,将值和state合并
  }
  render() {
    if (this.state.hasError) {
      return (
        <div>error</div>
      );
    }
    return (
      <div>
        <Suspense fallback={<div>loading</div>}>
          <About></About>
        </Suspense>
        {/* 
          lazy必须配合Suspense使用,Suspense是展示待加载状态中的组件,fallback属性需要传入一段jsx
          Suspense需要把异步导入的组件包起来 
        */}
      </div>
    );
  }
}



相关标签: react.js react