react 懒加载

Posted 2023-02-02 Jmytea

react 懒加载

1. 从react引入lazy 和 Suspense
2. 对于需要懒加载的组件 用lazy包裹引入，lazy是一个函数，参数是一个函数
3. 组件最外层用Suspense 包裹 fallback 是一个组件 当组件加载过程中会显示

import React,  Component, lazy/* react16.0之后新增的 */, Suspense  from "react";

// react异步加载组件的方式
const Box = lazy(()=>import('./modules/Box'));


export default class App extends Component 
  state = 
    isShow: false,
  ;

  render() 
    const  isShow  = this.state;
    return (
      <Suspense fallback=<div>loading....</div>>
      <div>
        <input
          type="checkbox"
          checked=isShow
          onChange=(ev) => this.setState( isShow: !isShow )
        />
        /* 异步加载组件, 必须在外面使用Suspense包裹，当组件正在加载时显示Suspense的fallback属性的结构 */
        isShow && <Box />
        <button onClick=this.btnAction>按钮</button>
      </div>
      </Suspense>
    );
  

  btnAction = () => 
    // 异步加载普通的文件
    import(/* webpackChunkName: "tools" */ "./modules/tools").then(
      ( alertMessage, default: console ) => 
        alertMessage(123);
        console("abcd");
      
    );
  ;