0

我在 reactjs.org 中看到了一些示例，但我想知道他们试图解决的问题和/或它背后的魔力是什么。除了反应文档中已有的内容之外，我如何在实际项目中使用它。

4

1 回答 1

2

我知道 React Suspense 有两个用例（而且肯定会发现更多）。请注意，在下面的答案中，我将suspense其用作实用参考，实际上使用的组件更多，例如lazy等react-cache。

#1 更容易获得更短的互动时间

较短的交互时间（即 TTI指标）是衡量您的网站对用户的感觉有多快的一种方法。如果您在浏览器开发工具中检查您的网络资源，您会发现等待下载 javascript 文件的时间非常长。即使它被缩小和压缩，它也可能不是最佳的。

例如，如果您的网站有时需要数据可视化库（例如 Highcharts），如果它不是您的用户会看到的第一件事，则您不需要使用第一个 javascript 文件发送该可视化组件。这将从您的初始捆绑包中节省大量大小并改善您的 TTI 指标。

这是通过 webpack 动态导入、react Lazy 和 React Suspense 的组合魔法完成的（这就是文档所指向的）

#2 处理数据获取的常见情况

我认为这仍然是一项正在进行的工作，但我记得 React 团队正在努力。如果您的组件需要从服务器（API 调用）获取其数据，那么您将看到一些常见问题，并且您将尝试以某种能力处理它们：

  1. 如果请求花费很长时间，则显示加载指示器
  2. 如果您的请求出错怎么办（错误边界现在为您执行此操作）
  3. 如果您想缓存昂贵的网络请求怎么办

这些都是常见的问题，而这正是悬念将有所帮助的地方。

可能感兴趣的其他资源

  1. Dan Abramovs在 jsConf 上发表演讲，向世界介绍悬念。
  2. 一篇关于媒体的好帖子，展示了代码拆分的好处和对 TTI 的影响
于 2019-03-26T08:59:39.303 回答