探索 React Suspense

观看截屏视频 [en] /观看演讲 [fr]

在 React v16 中，Facebook 团队发布了一个名为“Fiber”的新版本核心。得益于这次完全重写，我们已经看到了 Fragments、Portals 和 ErrorBoundaries 等新功能。其他一些功能仍在开发中：

• 悬念
• 时间分片

在过去的几个月里，Facebook 的工程师们对这些功能的可能性做了一些演示。目前可用的示例很少（截至本文撰写时，这些 API 仍然不稳定且未记录在案）。

在听完Ryan Florence 在 React Rally 上关于 Suspense 的演讲以及@reach/router如何为此做好准备之后，我决定做一个小项目：

• 深入研究这些新概念
• 分享代码示例
• 揭示一个简单的工具，可以帮助解释使用悬念的好处

👉尝试 topheman/react-fiber-experiments👈

Suspense 解决了什么问题？

• 它允许您在所有数据准备好之前开始渲染（渲染可以在数据开始加载时暂停，并在完成时恢复）
• 它可以让你避免旋转器的级联，这可能会因意外的回流和重绘而导致闪烁
• 代码拆分成为内置功能，易于使用（您还可以在加载脚本时暂停渲染）

这意味着：

• 将数据获取位置移至更靠近渲染位置的位置——数据封装
• 摆脱加载状态 - 组件中更清晰的状态（在某些用例中甚至可能是无状态的 - 不再需要 componentDidMount 生命周期钩子来获取数据）
• 对旋转器进行更精细的粒度控制（感谢<Placeholder>）

今天如何测试

Suspense 仍在积极开发中，请注意，API 可能会发生变化且不稳定，尽管它已经足够先进，可以用来开发项目。您需要自行构建 React 版本。

托菲

这是对React Suspense 的简短介绍，您可以通过观看视频并使用topheman/react-fiber-experiments在线玩游戏来了解更多信息。

这篇文章最初发表在我的博客上。