javascript - 使用 Socket IO 从数据库获取数据时使用 React 的哪种生命周期方法

Question

我将数据存储在数据库中，每当数据更新时，它都会向客户端发送一个事件。

这里是服务器端

socket.on("note delete", function(data) {
    rooms
      .findOneAndUpdate(
        {
          _id: data.roomId
        },
        { $pull: { notes: { _id: data._id } } }
      )
      .then(docs => {
        rooms.find({ _id: data.roomId }, function(err, docs) {

          socket.emit("remainingnotes", docs);
        });
      })
      .catch(err => {
        console.log("err", err.stack);
      });

remainingnotes 在客户端发出。现在我想将其内容实时更新到 this.state/MobX 状态。一旦数据库发生变化，我希望我的 Store 值相应更新。

我该怎么做？

// Client Side
socket.on("remainingnotes", function(data) {
      ChatStore.msgs = data[0].conversation; // ChatStore is my MobX store.
    });

我尝试在构造函数和 ComponentDidMount 中添加此事件，但两者都没有更新。 React 有没有办法监听客户端的事件？

Answer 1

数据层应该与React层分开，React层实际上是一个 View 层。

使用 React + MobX，您将执行以下操作:

MOBX 商店:

• 连接到 websocket/管理连接
• 从 View /React层接收UI事件
  • 更新存储或
  • 发送 websocket 事件(取决于 UI 事件)
• 从 websocket 接收事件并相应更新存储

react 组件:

• 每当数据发生变化时从 MobX 存储接收 props
• 将事件发送到 MobX 存储

因此 React 组件既不知道也不关心 MobX 存储数据来自哪里，它只是在数据更改时重新渲染并向存储发送 UI 事件。