如何在UI变更时进行后台同步，而不是获取请求？

Question

举个例子，我们以一个简单的带有评论功能的web应用为例。在我的理解中，当用户发布一条新的评论时，会发生以下情况。

1. 显示UI加载器：
2. 更新前端状态。
3. 向API发送一个获取请求来发布新的评论。
4. 等待响应
5. 向API发送另一个fetch请求，请求新的评论列表。
6. 等待。
7. 用新的评论更新前端状态。
8. 更新UI，用新的评论反映新的状态。

而几乎每一次数据变化，用户都需要等待，同时前端应用与后端交互。和我们之前用PHPPythonRuby、ajax、服务器端渲染和模板的方式一样。

这让我觉得用react这样的东西增加这么多前端的复杂度有什么用，而结果基本上是一样的。

我的问题是问：是否有其他办法可以解决这个问题？是否可以用下面的方法来代替上述情况。

1. 用户点击发表评论。
2. 更新前端状态。
3. 更新UI以反映新的状态和新的评论。
4. 在后台与API DB同步前端状态。

Answer 1

你肯定可以，你的第一种方法只是方式。

除了 "同步 "你的前端状态，另一种方法是在做步骤3-6之前，先预更新UI（步骤7 & 8），只有在API调用失败的情况下，才反向操作。这样对终端用户来说，应该也能有更好的用户体验。

Answer 2

我明白你认为让用户等到请求成功是浪费时间。然而，更重要的不是阻止用户一直向服务器发出糟糕的请求吗？

所以，我会做的就是在用户提出请求后，停止每次从数据库中获取数据。

1. 一开始就获取DB数据，并将它们存储在redux状态下。
2. 向DB提出请求，同时阻止用户进行任何操作。
3. 在请求成功的情况下，对redux状态进行修改。

---

但你想做的事可以这样做。

1. 获取DB数据开始，并将其存储在redux状态下。
2. 在后台向DB发出请求的同时，对redux状态进行修改。
3. 根据请求是否失败，将用户所做的更改从redux状态回滚回来。

Answer 3

好吧，既然你的问题被标记为 反应，你可以使用 阿波罗图书馆 (它的目的是在后台与graphql一起工作)来获取数据。它提供了一个名为 乐观的UI，它将用所尊重的结果更新前端，直到收到来自后端的回答。如果预期的结果与接收到的结果不同，组件将自动将用户界面改为 真正 的结果。如果出现错误，将显示错误信息。