使用React进行声明式资源加载

加载东西很困难

你们中有多少人写的是每天加载10次？通常，我们希望即使在连接速度较慢的情况下也能使我们的应用程序响应，因此我们有加载指示器向用户提供应用程序正在运行的反馈。如果您考虑您的应用程序，那么很多时间和精力都集中在协调何时出现，何时出现以及向用户展示什么方面。这是浏览器使用的任何资源，甚至是我们未明确获取的资源（例如图像，字体，代码等）也会影响我们进行交互和UX的时间。在本文中，我们将介绍几种在我们的应用程序中加载资源的方法，以及在不久的将来它将如何发挥作用。

代码拆分

代码拆分是指只发送加载正在访问的页面所需的代码，然后在用户导航时将其余代码发送到客户端。尽管有很多其他的方法可以实现这一点，但是React有几个api可以帮助我们将bundle分割成代码块，这些代码块以最有效的方式进行分组，以减小它们的文件大小。为了分割我们的应用程序，我们需要的第一个API叫做lazy，它非常简单，它需要一个返回动态导入的函数，然后它就可以替换组件了。

另一个API称为suspence。悬置帮助我们确定我们试图调用的资源是否可用，并在资源可用时显示另一种加载状态。换句话说，suspence是一个声明性的加载状态API。

数据获取

请看以下基于类的传统数据获取组件的示例：

它初始化构造函数上的状态，获取挂载时的数据，并在呈现时计算是否有数据要呈现，或者是否可以显示加载程序回退。你一定在想，当然用hook会更好吧？

使用hook，您可以使用effects获取数据，并强制检查加载状态以显示加载程序，直到资源可用为止。我们减少了一些样板代码，使其更干净，但它仍然是相同的过程，它仍然必须决定是否呈现加载程序或内容。

到目前为止，我们只能使用suspence加载带有lazy的动态代码，但实际上，我们也可以将它用于其他类型的资源。您可以挂起组件层次结构中的任何元素，如果调用资源无法挂起该子树的呈现并提供回退，它将查找该树，直到找到一个可以或可以出错的元素，它的工作方式与错误边界完全相同。

suspence允许异步资源的行为就像它们具有同步访问权限一样。我们甚至没有在我们的抓取组件上的加载程序，我们只是让React知道资源还没有准备好，Suspence将在树的某个地方提供一个回退，等待我们的资源准备好呈现。

suspence不仅通过成倍地减少代码行来改善DX，而且还允许在加载状态之间进行更平滑的转换，比如当你的应用程序从延迟加载代码到获取数据时。

其他资源

另一个很好的例子是图像，有时我们的页面呈现，一些图像丢失，对这些资源的请求可能更重。让我们做我们的新把戏，用悬置加载一个图像。

当然，你不必自己去做，这个平台是一个漂亮的库，它为你的图片和其他悬置资源包装了组件。

作为后备方案，您可以使用分辨率较低的常规</>< style>标记而不是微调器，这样可以在缩略图和全尺寸图像之间实现平滑过渡。

严格模式

因此，现在我们有一些资源加载，我们的应用程序可能会开始感到缓慢如果我们继续加载程序，我们需要决定我们愿意为每个资源等待多少。我肯定需要先检索代码和数据，但我可以在几秒钟内显示低分辨率的缩略图，以提供一个几乎完整的UI。悬置为我们提供了第二个名为maxDuration的道具，这个道具允许我们以milis为单位指定它应该等待多少时间，直到它提供一个回退或内容。maxDuration只有在满足某些条件时才会起作用，这就是事情变得有点棘手的地方。

为了让React正确地评估正在发生的事情，挂起的树中不应该有不推荐使用的api。为了帮助我们识别可能的问题，React公开了一个名为StrictMode的标记。严格模式是一个稳定的API，您现在可以在生产中使用它，任何东西都不会中断，但是，如果在它的子级中使用任何不推荐的API，您将在浏览器的控制台上得到错误。

并行渲染

如果你在严格模式下包装你的应用程序，你的控制台仍然是清晰的，恭喜你！现在您可以激活并发模式并开始利用maxDuration。但并发模式到底是什么呢？

有两种方法可以在应用程序中启用并发模式，同样，这些功能是实验性的，预计将在2019年第2季度左右发布。React dom公开一个名为createRoot的函数（当前不稳定的u createRoot），它接收到对要呈现应用程序的元素的dom引用，您可以将render方法与应用程序实例链接起来。

作为一个opt-in特性，React公开了一个名为ConcurrentMode的标记，您可以使用它来包装应用程序的子部分，以便只在它们的子树中启用并发呈现。