lazy

一、认识

---

React.lazy() 允许你定义一个动态加载的组件。这有助于缩减 bundle 的体积，并延迟加载在初次渲染时未用到的组件。

二、语法

---

const LazyComponent = React.lazy(()=>import('./text'))

• 第一个参数: React.lazy 接受一个函数，这个函数需要动态调用 import() 。它必须返回一个 Promise ，该 Promise 需要 resolve 一个 default export 的 React 组件。

三、用法

---

import React, { lazy, Suspense } from "react";
import ReactDOM from "react-dom";

const LazyComponent = lazy(() => import("./child.js"));

function App() {
  return (
    <div>
      <h3>App 组件</h3>
      <Suspense fallback={<div>loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

用 React.lazy 动态引入 child.js 里面的组件，配合 Suspense 实现动态加载组件效果。这样很利于代码分割，不会让初始化的时候加载大量的文件。