我有一个 React JS 页面，其中有一个表格。我的要求如下:
- 加载表(使用 React Table)，调用数据 API 并填充表
- 在客户端启动网络套接字连接并监听任何更新
- 当数据库中添加条目时，另一端的 websocket 服务器会发送更新(事件)，因此我需要调用数据 API 来获取更新的信息
- 通过网络套接字接收到任何更新(基本上是一个事件)后，我需要再次重新加载表格组件，以便对数据 API 进行 API 调用，进而用新数据填充表格。
我现在的实现如下:
- 加载表格、调用 API、填充表格
- 打开 websocket 并监听任何更新。
- 收到任何更新事件后，我会再次调用 API 并重新加载表格。
我只使用 React，没有使用 Redux 或 MobX 进行状态管理。上面的方法有效，但我想知道这是唯一的方法还是有更好的方法来实现上述方法？
最佳答案
最好问问自己有多少数据将发生变化，以及有多少用户将使用您的平台。随着这些数字的增长，您的实现可能会发生变化，因为您不想让 API 因请求而重载。
在过去的一个项目中，我在 React/Redux 中使用了 websockets，并遵循与您相同的路径，它表现良好，并且可能是您将获得的最好的。
另一种明智的方法是将添加到表中的数据与 websocket 更新函数一起发送，这样您就不必再次调用数据库。我想说，对于消息传递平台来说，这是一个更好的解决方案，而不是您正在做的事情。但如果许多用户经常获取这些更新，这也可能是一个好方法，因为它将更好地管理 API 上的负载。
我可能会坚持您的实现，因为它是可行的，但请确保您将代码保持在可以根据需要轻松更改的状态。
关于javascript - 如何使 React 组件在接收到 Web 套接字上的更新后重新加载？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46069313/