Javascript 这是使用React.suspence的正确方法吗？

关于悬念，我有几个问题

以下是一些示例代码供参考：

// 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/ComponentA/index.js
从“React”导入React；
常量样式={
显示：“网格”，
placeItems：“中心”
};
导出默认函数组件A（）{
返回我是组成部分；
}

//components/ComponentB/index.js
从“React”导入React；
常量样式={
显示：“网格”，
placeItems：“中心”
};
导出默认函数组件B（）{
返回我是组件B；
}

//App.js
从“React”导入React；
导入“/styles.css”；
const ComponentA=React.lazy（（）=>import（“./components/ComponentA”）；
const ComponentB=React.lazy（（）=>import（“./components/ComponentB”）；
导出默认函数App（）{
const[state，toggleState]=React.useReducer（（state）=>！state，false）；
返回(
点击显示
{州？：}
);
}

在运行这段代码时，我马上注意到了几件事

我注意到的第一件事是，当应用程序第一次加载时，在呈现

I am component b

之前，您可以看到

加载…

我注意到的第二件事是，如果您单击按钮，您可以在屏幕上呈现

I am component a

之前再次看到

加载…

我假设这是动态导入的预期结果

我注意到的最后一件事是，继续切换按钮，我再也看不到加载…。我假设这是因为客户端已经导入并使用了组件。我也认为这是预期的行为

我的三个问题是

• 我是否正确使用React的动态导入（或者我是否应该在其他地方使用

  import

  ），以及
• 应在什么时候作出反应。应使用悬念和动态导入

如果组件相对简单，我是否需要考虑懒惰加载组件？

沙箱供参考

---

第一个问题- 是的，您正在使用

lazy（）

函数正确导入组件

第二个问题- 从

悬念允许组件在渲染之前“等待”某些内容

它用于提高站点在慢速或不良网络上的性能和加载时间，以及

异步

任务，如数据获取，其中组件取决于返回的数据，因此您向用户显示

加载..

消息作为

回退

例如，我编写并使用的组件-

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;

import React，{Component，lazy，suspent}来自“React”；
从“react router dom”导入{Route，Switch}；
从“/Error404”导入Error404；
从“/LoadingSpinner”导入LoadingSpinner；
const Dashboard=lazy（（）=>import（“./Dashboard”）；
const Employees=lazy（（）=>import（“./EmployeesPage”）；
类容器扩展组件{
//处理路径“/”和“/employees”以及任何未知路径
render（）{
返回(
);
}
}
导出默认容器；

• 这里，我是我的两个组件

  仪表板

  和

  员工

  ，它们本身包含许多组件，并且相对复杂
• 延迟加载它们可以防止在第一次加载站点时连接被阻塞
• 现在，只有当用户通过某些方式导航到指定的

  URL

  时，才会加载这些组件。 由于可以安全地假设用户在进入

  Employees

  页面（至少在我的应用程序中）之前会在

  Dashboard

  上花费一些时间，因此这种方法很有效

关于第三个问题-

• 如果您有确信在站点加载时需要的组件，最好不要延迟加载，以保持良好的用户体验
• 小组件（按其捆绑大小）不需要延迟加载，只有当您认为许多组件很少使用时，才可以将它们延迟加载到一个捆绑中

最后-

• 您可以打开浏览器的

  developer tools

  上的“网络”选项卡，并在用户请求时查看加载的捆绑包（React处理

  lazy（）

  ）。捆绑包的标签如下所示-

希望你找到有用的答案和任何建议的职位表示感谢✌

// 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>
  );
}

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;