React Suspense 试图解决什么问题？
What problem is React Suspense trying to solve?
我在reactjs.org看到了一些例子，但我想知道他们试图解决的问题and/or它背后的魔力是什么。除了 React 文档中已有的内容，我如何在实际项目中使用它。
我知道 React Suspense 有两个用例（而且肯定还有更多有待发现）。请注意，在下面的答案中，我使用 suspense 作为实用参考，实际上使用的组件更多，例如 lazy、react-cache 等
#1 更容易获得更短的交互时间
较低的 time to interactive a.k.a TTI 指标是衡量您的网站 给用户 的感觉有多快的一种方式。如果您在浏览器开发工具中检查您的网络资源，您会发现等待下载 javascript 文件花费了非常多的时间。即使它被缩小和压缩，它也可能不是最佳的。
为 e.x。如果您的网站有时需要数据可视化库（比如 Highcharts），如果它不是您的用户会看到的 first 东西，则您不需要发送该可视化组件第一个 javascript 文件。这将从您的初始捆绑包中节省大量大小并改善您的 TTI 指标。
这是通过结合 webpack 动态导入、React Lazy 和 React Suspense（这就是文档所指向的）的魔法来完成的
#2 处理数据获取的常见情况
我认为这仍在进行中，但我记得 React 团队正在努力。如果您的组件需要从服务器获取数据（API 调用），那么您会看到一些常见问题，您将尝试以某种方式处理它们：
- 如果请求耗时较长则显示加载指示器
- 如果您的请求出错怎么办（错误边界现在为您做）
- 如果您想缓存昂贵的网络请求怎么办
这些都是常见的问题，而这正是悬念会有所帮助的地方。
可能感兴趣的其他资源
- Dan Abramovs talk at jsConf 向世界介绍悬念。
- medium 上的一个很好的 post 展示了代码拆分的好处和对 TTI 的影响
我在reactjs.org看到了一些例子，但我想知道他们试图解决的问题and/or它背后的魔力是什么。除了 React 文档中已有的内容，我如何在实际项目中使用它。
我知道 React Suspense 有两个用例（而且肯定还有更多有待发现）。请注意，在下面的答案中，我使用 suspense 作为实用参考，实际上使用的组件更多，例如 lazy、react-cache 等
#1 更容易获得更短的交互时间
较低的 time to interactive a.k.a TTI 指标是衡量您的网站 给用户 的感觉有多快的一种方式。如果您在浏览器开发工具中检查您的网络资源，您会发现等待下载 javascript 文件花费了非常多的时间。即使它被缩小和压缩，它也可能不是最佳的。
为 e.x。如果您的网站有时需要数据可视化库（比如 Highcharts），如果它不是您的用户会看到的 first 东西，则您不需要发送该可视化组件第一个 javascript 文件。这将从您的初始捆绑包中节省大量大小并改善您的 TTI 指标。
这是通过结合 webpack 动态导入、React Lazy 和 React Suspense（这就是文档所指向的）的魔法来完成的
#2 处理数据获取的常见情况
我认为这仍在进行中，但我记得 React 团队正在努力。如果您的组件需要从服务器获取数据（API 调用），那么您会看到一些常见问题，您将尝试以某种方式处理它们：
- 如果请求耗时较长则显示加载指示器
- 如果您的请求出错怎么办（错误边界现在为您做）
- 如果您想缓存昂贵的网络请求怎么办
这些都是常见的问题，而这正是悬念会有所帮助的地方。
可能感兴趣的其他资源
- Dan Abramovs talk at jsConf 向世界介绍悬念。
- medium 上的一个很好的 post 展示了代码拆分的好处和对 TTI 的影响