1

我们正在创建一个 React 应用程序，它在多个位置具有基本 CRUD 操作的列表。基本的例子当然是：

  • 填写输入以获取项目名称，单击提交
  • 向服务器发送请求
  • 成功时触发回调
  • 使用响应数据更新项目列表

我希望这个操作是完全乐观的：

  • 填写输入以获取项目名称，单击提交
  • 使用给定名称使用项目更新列表
  • 向服务器发送请求
  • 成功时触发回调
  • 使用响应数据更新列表中的项目

因此，在第一个示例中，我们将简单地从响应中创建一个项目并更新应用程序状态。在第二个示例中，我们制作项目，当响应返回时，我们需要找到正确的项目。

这些项目从服务器返回时具有 id。如果 item 有一个 id，那么更新当然非常简单。第二个示例的问题是，我们不知道项目的后端 ID。

我通过提供前端 id 亲自解决了这个问题，该 id 仅用于在回调中引用正确的元素。我和我的同事不太喜欢这种方法，因为它有点……凌乱。

处理这种情况的合适、有效的模式是什么？

4

1 回答 1

1

首先，我很高兴您在项目中找到了乐观 UI 的位置；）

关于您的问题：您所做的确实是一个完全有效的解决方案。设置前端 ID 完全没问题。但在类似的情况下，我的做法会有所不同。我不会在最后一步更新项目，而是再次更新整个列表。这样做的重点是无论如何您都会得到完整列表的响应，那么为什么不使用它呢？它解决了两个问题：

  • 无需依赖前端 ID 或任何其他标记/存储项目的方式；
  • 如果有可能从不同的客户端对列表进行多线程更新（在您的客户端获取列表和点击之间的时间范围内submit），更新整个列表将使其保持最新状态更好；

请注意，尽管更新大型列表毕竟可能会对性能产生影响。同时，您不需要在收到响应后解析列表，因此您可以节省一些时间。

因此，比较这两种解决方案并根据为您的用户提供的最佳结果做出决定；）

于 2017-02-24T21:42:58.167 回答