柒书
博客
工具
收藏
游戏
博客
工具
收藏
游戏

React 组件动态加载/懒加载

React16.6版本提供了Suspense、lazy用于组件的动态加载（暂不支持服务端渲染）。
对于可能不会使用的模态框组件之类使用动态加载，仅在使用时加载，加快页面的加载速度。

动态加载：即需要展示时才去加载这部分代码

App.js
import React, { useState, Suspense, lazy } from "react";
import "./styles.css";

const Test = lazy(() => import("./pages/Test"));

export default function App() {
  const [state, setState] = useState(false);
  return (
    <div className="App">
      <button onClick={() => setState(true)}>动态加载</button>
      <Suspense fallback={<div>loading...</div>}>{state && <Test />}</Suspense>
    </div>
  );
}
Test.js
import React from "react";

export default function Test() {
  return <div>test</div>;
}