Javascript 通过UI更改数据库时，刷新前端UI的最佳实践是什么？

我希望了解在同时更新UI和数据库值时的最佳实践

设置 我在前端有一个表，它是一个包含以下列的项目列表：

• 身份证
• 名字
• 创建日期
• 收藏夹按钮（星形）

加载页面时，此列表通过axios（类似于Ajax）从数据库中提取。favorite按钮是一个切换按钮，用于用户更改类并更新数据库。我试图了解更新UI和数据库的最佳实践

目前，逻辑是这样的：

初始列表加载到页面上

用户单击其中一行上的“收藏夹”按钮

UI javascript将更新发送到数据库，以更改列表中单个项目的“收藏夹”值

成功进行更改后，后端将响应200个成功代码

前端接收成功的更改，然后使用axios查询完整的数据库列表，用更新的数据刷新UI列表

这是刷新UI的正确方法吗？如果我等待更新，然后在用户进行更改时再次查询数据库，那么我发现这种方法的问题是UI响应时间差

其他选择

---

我考虑过的另一个选项是更新UI列表，同时将更新请求发送到后端。唯一的区别是我不会“重新查询”数据库来更新数据，因为它应该匹配。

我认为这取决于更个性化的方法。我个人认为，如果我们确实知道发生了什么样的变化，就根本没有必要提出任何疑问。或者我们可以只查询特定对象，而不是整个列表。或者我们的API可以配置为，如果编辑成功，它将从数据库返回新的、更新的对象（这是我最喜欢的）

但有人可能会说，刷新整个列表是个坏主意。是的

• 对数据库的较重查询
• 更多要在后端转换为JSON的项目
• 通过网络发送更多数据
• 前端需要解析更多JSON

---

如您所见，这很麻烦，如果您有许多用户，他们可能会开始用查询轰炸数据库，尽管每个人都知道（在某种程度上是推测性的，但基本上是正确的）这些数据目前的样子。因此，如果API无法配置为返回更新的对象，我建议要么只查询更新的对象，要么根本不查询——如果我们知道我们请求后端在数据库中进行了哪些更改，并且我们知道后端成功地做到了这一点，然后，我们只是在我们的前端应用这些变化，没有任何进一步的考虑，

有很多变量要考虑。我所能推荐的就是避免在成功更改后更新整个列表（4）。而是发送带有200成功代码的更新项目的ID。然后以gmail为例，在javascript中只更新该元素，您应该使用“其他选项”的想法。用户只需不断更新记录，而无需等待页面刷新，服务器也会不断更新。问题是如果有多个用户同时进行更改。。。然后您可能需要刷新整个页面。