react + signalR中的数据绑定答案

【问题标题】：data binding in react + signalRreact + signalR中的数据绑定
【发布时间】：2014-09-22 01:06:17
【问题描述】：

我有一个策略问题。

我想使用 signalR 更改我网站中的数据并使用 react 显示更改的数据。我的问题是：如何在 signalR 和 react 之间执行数据绑定？

我的第一条线索如下：

信号R：

chat.client.addMessage = function (name, message) {
    chatHistory.push({ Author: name, Text: message }); //here I change global variable chatHistory
};

反应：

var CommentList = React.createClass({some class here});

var CommentBox = React.createClass({
    componentRefresh: function () {
        this.setState({ data: chatHistory });
    },
    getInitialState: function () {
        return { data: chatHistory };
    },
    componentDidMount: function () {
        this.componentRefresh();
        setInterval(this.componentRefresh, this.props.interval);
    },
    render: function () {
        return (
          React.DOM.div(null,
            CommentList({ data: this.state.data })
          )
      );
    }
});

React.renderComponent(
  CommentBox({ interval: 2000 }),
  document.getElementById('content')
);

在 react commentBox 组件中，我提供全局 chatHistory 并每 2 秒请求一个新值。

还有更优雅的方法吗？如果 chatHistory 变量没有改变，如何避免重绘评论框？

【问题讨论】：

唯一体面的方法要求 signalR 会在数据发生变化时告诉你（我不知道 signalR）。
您不能在 SignalR addMessage 回调结束时调用myCommentBoxInstance.setState({ data: chatHistory }); 以立即重新呈现您的评论框吗？那么您可能不需要使用间隔。

标签： signalr reactjs

【解决方案1】：

您在 CommentBox 中维护状态的方法很好。随着组件库的增长，维护自更新组件可能会变得复杂。我建议研究一下 React 团队设计的 Flux 架构，尤其是他们的 Todo MVC Flux 示例。

如果你知道状态没有改变，你可以实现 shouldComponentUpdate 来防止 React 重新渲染评论框。此外，您应该保留对间隔的引用，以便在卸载 CommentBox 时将其清除，否则在删除组件后它将继续轮询。

var CommentBox = React.createClass({
  ...

  componentDidMount: function() {
    this.componentRefresh();
    this._interval = setInterval(this.componentRefresh, this.props.interval);
  },

  componentWillUnmount: function() {
    clearInterval(this._interval);
    this._interval = null;
  },

  shouldComponentUpdate: function(nextProps, nextState) {
    // Do a deep comparison of `chatHistory`. For example, use
    // Underscore's `isEqual` function.
    return !_.isEqual(this.state.chatHistory, nextState.chatHistory);
  },

  ...
});

【讨论】：