React复习笔记（有意思的React.lazy()）

有意思的React.lazy()

在React文档中有这么一些记载

React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。
React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 defalut export 的 React 组件。

解释一下

就是说你之前是这样引入的

import OtherComponent from './OtherComponent';

现在是这样的

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

再然后就是需要把OtherComponent 组件写到

     import { Suspense} from 'react';

     ...
     ...
     ...
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>

再往下就是说,Suspense 需要接收一个属性 fallback,这个属性的值是一个你想在组件加载的时候展示的一些加载页面(当然，你也可以整些其他的组件)

fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。

实战使用;

import React, { Suspense, lazy, Component, Fragment } from 'react';
const LazyOne = lazy(() => import("./LazyOne"));
const LazyTwo = lazy(() => import("./LazyTwo"));


export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            toggleCom: true
        }
        this.toggle = this.toggle.bind(this);
    }
    render() {
        const tempToggle = this.state.toggleCom;
        return (
            <>
                <button onClick={this.toggle}>切换组件</button>
                <Suspense fallback={<div>加载中...</div>}>
                    {tempToggle ? <LazyOne /> : <LazyTwo />}
                </Suspense>
            </>
        )
    }
    toggle() {
        const tempToggle = !this.state.toggleCom;
        this.setState({ toggleCom: tempToggle });
    }
}