javascript - 这是使用 React.Suspense 的正确方法吗？

Question

我有几个关于 React.Suspense 的问题。
下面是一些示例代码供引用:

// components/ComponentA/index.js
import React from "react";

const style = {
  display: "grid",
  placeItems: "center"
};
export default function ComponentA() {
  return <div style={style}>I am componentA</div>;
}

// components/ComponentB/index.js
import React from "react";

const style = {
  display: "grid",
  placeItems: "center"
};
export default function ComponentB() {
  return <div style={style}>I am componentB</div>;
}

// App.js
import React from "react";
import "./styles.css";

const ComponentA = React.lazy(() => import("./components/ComponentA"));
const ComponentB = React.lazy(() => import("./components/ComponentB"));

export default function App() {
  const [state, toggleState] = React.useReducer((state) => !state, false);
  return (
    <div className="App">
      <button onClick={toggleState}>click to show</button>
      <React.Suspense fallback={<div>Loading...</div>}>
        {state ? <ComponentA /> : <ComponentB />}
      </React.Suspense>
    </div>
  );
}

运行此代码时，我立即注意到了几件事。
我注意到的第一件事是当应用程序第一次加载时，有一个 split 时刻，你可以看到 loading...之前 I am componentB被渲染。
我注意到的第二件事是，如果你点击按钮，你可以再次看到 loading...之前 I am componentA呈现在屏幕上。
我认为这是动态导入的预期结果。
我注意到的最后一件事是继续切换按钮，我从来没有看到 loading...再次。我假设这是因为客户端已经导入并使用了组件。我也假设这是预期的行为。
我的三个问题是，

我是否正确使用 React 的动态导入(或者我应该在其他地方使用 import)和

什么时候应该React.Suspense并使用动态导入

如果组件比较简单，还需要考虑延迟加载组件吗？
沙盒供引用

Answer 1

对于第一个问题 -
是的，您正在使用 lazy()导入组件的功能 正确 .
对于第二个问题 -
来自 React docs ,

Suspense lets components “wait” for something before rendering.

它用于提高您网站的性能 First Contentful Paint和 加载次数 在缓慢或糟糕的网络上，以及 asynchronous诸如获取数据之类的任务，您的组件取决于返回的数据，因此您会显示 Loading..向用户发送消息 Fallback .
例如，我编写和使用的一个组件-

import React, { Component, lazy, Suspense } from "react";
import { Route, Switch } from "react-router-dom";
import Error404 from "./Error404";
import LoadingSpinner from "./LoadingSpinner";
const Dashboard = lazy(() => import("./Dashboard"));
const Employees = lazy(() => import("./EmployeesPage"));

class Container extends Component {
  //handles paths '/' and '/employees' along with any unknown paths
  render() {
    return (
      <div id="container">
        <div id="background">
        </div>
        <div id="content">
          <Switch>
            <Route exact path="/">
              <Suspense fallback={<LoadingSpinner />}>
                <Dashboard />
              </Suspense>
            </Route>
            <Route path="/employees">
              <Suspense fallback={<LoadingSpinner />}>
                <Employees />
              </Suspense>
            </Route>
            <Route component={Error404} />
          </Switch>
        </div>
      </div>
    );
  }
}

export default Container;

在这里，我是lazy loading我的两个组件 Dashboard和 Employees它们本身包含许多组件并且相对复杂。

延迟加载它们可以防止在第一次加载站点时连接被阻塞。

现在仅当用户导航到指定的 URL 时才加载这些组件。由一些 NavLinks .
因为可以安全地假设用户会在 Dashboard 上花费一些时间。去之前Employees页面(至少在我的应用程序中)，这种方法工作正常。

对于第三个问题 -

如果您有确定需要的组件 当网站加载时 ，最好不要懒加载它们以保持良好的用户体验。

小组件(按包大小)不需要延迟加载，只有当您认为许多组件很少使用时，您才可以将它们延迟加载到一个包中。

最后 -

您可以打开 developer tools 上的“网络”选项卡浏览器，并查看用户请求时加载的包(React 在 lazy() 中处理)。捆绑包的标签如下- Network Tab screenshot

希望您发现答案有用，并且对帖子的任何建议表示赞赏✌