React Suspense 试图解决什么问题？

Question

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

Answer 1

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

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

较低的time to interactive a.k.a TTI 指标是衡量您的网站对用户感觉的速度的一种方式。如果您在浏览器开发工具中检查您的网络资源，您会发现等待下载 javascript 文件的时间非常长。即使它被缩小和压缩，它也可能不是最佳的。

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

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

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

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

1. 如果请求耗时较长，则显示加载指示器
2. 如果您的请求出错怎么办（错误边界现在为您解决）
3. 如果您想缓存昂贵的网络请求怎么办

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

可能感兴趣的其他资源

1. Dan Abramovs talk at jsConf 向世界介绍悬念。
2. medium 上的一篇不错的帖子展示了代码拆分的好处和对 TTI 的影响