javascript - React 和 websocket - 数据操作

Question

我正在尝试通过 websocket 实现与服务器的通信。假设我不能使用 Flux 或类似的库。我的问题是更新服务器响应的数据。

我不确定如何在服务器响应更新数据时实现回调函数。

到目前为止我有这样的东西(不是实际代码)

事件.js

const e = require('event-emitter');
var events = e();
module.exports = events;

套接字.js

const events = require('./events');

module.exports = {
  var ws;

  init: function(URL) {
    ws = new WebSocket(URL);
    ws.onopen = function() { ... }
    ws.onclose = function() { ... }
    ws.onmessage = function(data) {
      events.emit(data.action, data);
    }

  },

  send: function(data) {
    ws.send(data);
  }
}

model.js

const events = require('./events')
var data = [];

/* listening for some specific event from socket */
events.on("action", doAction);

function doAction(data) {
  events.push(data);

  /* now I have to emit event which react component
  is listening to so it can update data */
  events.emit("viewAction");
  }
}

/* what react component uses to get and render data */
module.exports = {
  get: () => data,
  events: events
}

component.js

const React = require('react');
const ReactDOM = require('react-dom')
const model = require('./model');

var App = React.createClass({
  componentDidMount: function() {
    model.events.on('viewAction', this.refresh);
  },

  componentWillUnmount: function() {
    model.events.off('viewAction', this.refresh);
  }

  render: function() {
    return (
      <div>
        {model.get()}
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

我希望示例能够清楚地说明我正在尝试做什么以及我的问题是什么。这也使得模型事件监听器无法工作，除非它包含在我不太高兴的 react 组件之一中。

有没有更好的办法？

Answer 1

您在这里看到的是 flux architecture 的简单实现。 :

在您的情况下，您的操作来自 websocket 服务器响应，您的调度程序是 websocket，您的商店是模型。

有几点可以进一步改进您的设计:

• 在组件中使用 this.refresh 将 model.get() 保存到使用 this.setState() 的状态，以便它在内部调用重新渲染。
• 在您的组件中包含 shouldComponentUpdate()，并将旧状态与当前状态进行比较以确定组件是否真的需要更新。 这会显着提高应用程序的效率，减少文档中的重排量
• 每当组件收到 UI 事件时，如果该事件以任何方式影响应用程序状态，请通过 websocket 将事件发送回服务器，以便服务器可以发送刷新组件 View 所需的任何更新。
  • 可选地，如果模型能够在不与服务器通信的情况下通过 UI 事件确定应用程序的状态，则您可以向模型发出 UI 事件，但要确保模型将更改传播到监听的组件它，并发送到服务器，这样它就不会与作为应用程序真实来源的服务器不同步。

无论你在写什么，祝你好运!