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处理有关数据提取的常见情况

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

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

这些是常见的问题，这是悬念可以解决的地方。

可能感兴趣的其他资源

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