Understand Suspense and lazy in React

Introduction to Suspense and lazy in React

Suspense role

Suspense means undetermined in Chinese. As the name suggests, it refers to the content of the page before the data is loaded.
As long as any subcomponent (data) in Suspense is still pending or in the initial state, the content of fallback will be displayed. Wait for all the data to be loaded before displaying the sub-components to avoid multiple updates.

This feature is very similar to the traditional data rendering with a loading state before rendering, except that React provides the Suspense component to more elegantly handle the display problem before rendering.

lazy function

We all know that after packaging with webpack, all resources will be packaged into an entry file, which can reduce the number of requested resources.

Of course, we can use mini-css-extract-plugin to separate CSS separately. But all the projects are packaged into a js file, which will inevitably lead to too large and slow loading.

Using React.lazy, components can be packaged into separate chunk files and loaded on demand. For example, when loading the home page, only the resource files needed by the home page are loaded, so that the loading speed can be improved.

React.lazy is a function that needs to call import() dynamically. It must return a Promise, and the Promise needs to resolve a defalut export React component.

If you don't use lazy, you introduce components like this:

import App from './App';

After using lazy, the components are introduced like this:

const App = React.lazy(() => import('./App.js'));

Usually lazy is used in conjunction with Suspense components, so that a friendly waiting interface can be presented during lazy loading, such as loading diagrams.

Suspense combined with lazy use case

Three sub-components are provided in the following Suspense components.
One is the asynchronous component of Promise; the
other is the state data that needs to be updated; the
other is the lazy component.
The content of fallback is displayed before all three components are loaded.
The content of the component is displayed after all loading is completed.

index.js

import React,{
    
    Suspense,lazy} from 'react';
const LazyComp = lazy(()=>import('./lazy.js'));
let data = "";
let promise = "";
function requestData() {
    
    
    if(data){
    
    
        return data;
    }
    if(promise){
    
     throw  promise}
    promise = new Promise((resolve)=>{
    
    
        setTimeout(()=>{
    
    
            data = "数据出来了";
            resolve();
        },2000)
    })
    throw promise
}
function SuspenseComp() {
    
    
    const data = requestData();
    return <p>{
    
    data}</p>
}
export default class  CommonTable extends React.Component{
    
    
    constructor(){
    
    
        super();
        this.state={
    
    
            title:"初始标题"
        }
    }
    componentDidMount(){
    
    
        this.setState({
    
    
            title:"渲染后的标题"
        })
    }
    render(){
    
    
        return<Suspense fallback="loading">
            <SuspenseComp/>
            <div>{
    
    this.state.title}</div>
            <LazyComp/>
        </Suspense>
    }
}

lazy.js

import React from 'react';
export default ()=><p>lazy data</p>

Initial effect:

Insert picture description here
After 2s, all loading is completed: