通过 UI 更改数据库时刷新 front-end UI 的最佳做法是什么？
What is the best practice for refreshing front-end UI when making changes the the database through the UI?
我希望了解同时更新 UI 和数据库值时的最佳做法。
Set-up
我在前端有一个 table，它是包含以下列的项目列表：
- ID
- 姓名
- 创建日期
- 收藏按钮（星号）
这个列表是在加载页面时通过axios（类似于Ajax）从数据库中提取的。最喜欢的按钮是用户更改 class 并更新数据库的开关。我正在尝试了解更新 UI 和数据库的最佳做法。
目前逻辑是这样的：
- 初始列表已加载到页面上
- 用户单击其中一行中的收藏按钮
- UI javascript 将更新发送到数据库以更改列表中该单个项目的“收藏夹”值
- 一旦更改成功，back-end 会返回 200 成功代码
- 前端接收到修改成功，然后使用axios查询全库列表，用更新后的数据刷新UI列表
这是刷新 UI 的正确方法吗？ 我发现这种方法的问题是 UI 如果我在等待，响应时间很短在用户进行更改时更新并再次查询数据库。
其他选项
我考虑过的另一个选择是更新 UI 列表，同时将更新请求发送到 back-end。唯一的区别是我不会“re-query”数据库来更新数据，因为它应该匹配。
我认为这取决于更多的个人方法。我个人认为，如果我们确实知道发生了什么样的变化，则根本没有必要进行任何查询。或者我们可以只查询那个特定的对象，而不是整个列表。或者我们的 API 可以配置为如果编辑成功，它 return 是数据库中新的、更新的对象（这是我的最爱）。
但有人可能会争辩说刷新整个列表是个坏主意。这是
- 对数据库的更繁重的查询
- 更多项目可在后端转换为 JSON
- 通过网络发送更多数据
- 更多 JSON 需要在前端解析
如您所见，这很麻烦，如果您有很多用户，他们可能会开始用查询轰炸数据库，尽管每个人都知道（有些推测，但大部分是正确的）数据在此刻的样子.因此，如果 API 不能配置为 return 更新的对象，我建议要么只查询更新的对象，要么根本不查询——如果我们知道我们请求后端进行哪些更改在数据库中，并且我们知道后端成功地做到了这一点，那么我们只是在我们的前端应用更改而不需要任何进一步的思考
我希望了解同时更新 UI 和数据库值时的最佳做法。
Set-up
我在前端有一个 table，它是包含以下列的项目列表：
- ID
- 姓名
- 创建日期
- 收藏按钮（星号）
这个列表是在加载页面时通过axios（类似于Ajax）从数据库中提取的。最喜欢的按钮是用户更改 class 并更新数据库的开关。我正在尝试了解更新 UI 和数据库的最佳做法。
目前逻辑是这样的：
- 初始列表已加载到页面上
- 用户单击其中一行中的收藏按钮
- UI javascript 将更新发送到数据库以更改列表中该单个项目的“收藏夹”值
- 一旦更改成功，back-end 会返回 200 成功代码
- 前端接收到修改成功，然后使用axios查询全库列表，用更新后的数据刷新UI列表
这是刷新 UI 的正确方法吗？ 我发现这种方法的问题是 UI 如果我在等待，响应时间很短在用户进行更改时更新并再次查询数据库。
其他选项
我考虑过的另一个选择是更新 UI 列表，同时将更新请求发送到 back-end。唯一的区别是我不会“re-query”数据库来更新数据，因为它应该匹配。
我认为这取决于更多的个人方法。我个人认为，如果我们确实知道发生了什么样的变化，则根本没有必要进行任何查询。或者我们可以只查询那个特定的对象，而不是整个列表。或者我们的 API 可以配置为如果编辑成功，它 return 是数据库中新的、更新的对象（这是我的最爱）。
但有人可能会争辩说刷新整个列表是个坏主意。这是
- 对数据库的更繁重的查询
- 更多项目可在后端转换为 JSON
- 通过网络发送更多数据
- 更多 JSON 需要在前端解析
如您所见，这很麻烦，如果您有很多用户，他们可能会开始用查询轰炸数据库，尽管每个人都知道（有些推测，但大部分是正确的）数据在此刻的样子.因此，如果 API 不能配置为 return 更新的对象，我建议要么只查询更新的对象，要么根本不查询——如果我们知道我们请求后端进行哪些更改在数据库中，并且我们知道后端成功地做到了这一点，那么我们只是在我们的前端应用更改而不需要任何进一步的思考