性能优化_代码分割（二）

Suspense组件

应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等)。

fallback 属性接受任何在组件加载过程中你想展示的 React 元素。

xxxxxxxxxx
import React, { Component,Suspense } from 'react';
const LazyComponent= React.lazy(()=>import ('./LazyComponent'))

export default class LazyTest extends Component {
    constructor(){
        super()
        this.state={}
    }
  render() {
    return (
      <div>
        下面的组件被延迟加载
        <button onClick={()=>this.setState({show:true})}>加载组件</button>
       {this.state.show&&<Suspense fallback={<div>loading....</div>}>
        <LazyComponent/>
           </Suspense>} 
      </div>
    );
  }
}

异常捕获边界

如果模块加载失败（如网络问题），它会触发一个错误。你可以通过异常捕获边界（Error boundaries）技术来处理这些情况，以显示良好的用户体验并管理恢复事宜。

xxxxxxxxxx
import React, { Component,Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';
const LazyComponent= React.lazy(()=>import ('../LazyComponent'))

export default class LazyTest extends Component {
    constructor(){
        super()
        this.state={}
    }
  render() {
    return (
      <div>
        下面的组件被延迟加载
        <button onClick={()=>this.setState({show:true})}>加载组件</button>
       {this.state.show&&<MyErrorBoundary>
        <Suspense fallback={<div>loading....</div>}>
        <LazyComponent/>
           </Suspense>
           </MyErrorBoundary>} 
      </div>
    );
  }
}

实时效果反馈

1. 下列说法错误的是：

A Suspense可以设置组件懒加载过程中的等待界面

B 错误边界可以捕获懒加载组件加载失败的错误

C Suspense组件的callback可以设置组件加载过程中展示的 React 元素

D Suspense组件的fallback可以设置组件加载过程中展示的 React 元素

答案

1=>C