如何在Web套接字上接收更新后重新加载React组件？

Question

我有一个React JS页面，它有一个表格。我的要求如下：

• 加载表（使用React Table），调用Data API并填充表
• 在客户端启动Web套接字连接并侦听任何更新
• 当有一个条目添加到数据库中时，另一端的websocket服务器发送更新（事件），因此我需要调用Data API来获取更新的信息
• 在通过Web套接字收到任何更新（基本上是一个事件）后，我需要再次重新加载表组件，以便对Data API进行API调用，该API将使用新数据填充表。

我现在的实施如下：

• 加载表格，调用API，填充表格
• 打开websocket并收听任何更新。
• 收到任何更新后，我再次调用API并重新加载表。

我只使用React而没有使用Redux或MobX进行状态管理。上面的方法有效但我想知道这是唯一的方法还是有更好的方法来实现上述方法？

Answer 1

可能很高兴问自己有多少数据会发生变化，以及有多少用户将使用您的平台。随着这些数字的增长，您的实现可能会发生变化，因为您不希望使用请求重载API。

在过去的一个项目中，我使用了带有React / Redux的websockets并遵循了相同的路径，它表现良好，可能是你得到的最好的。

您的方法的另一种选择也是明智的，就是将添加到表格中的数据与websocket更新功能一起发送，这样您就不必再次调用数据库了。我会说这是一个更好的解决方案，而不是你正在做的消息平台。但是，如果许多用户经常获得这些更新，这也可能是一个很好的方法，因为它会更好地管理API上的负载。

我可能会坚持你的实现，因为它是可行的，但请确保将代码保留在可以根据需要轻松更改的状态。