Signalr react+中的数据绑定;信号员
我有一个战略问题 我想在我的网站上使用signalR更改数据,并使用react显示更改的数据。我的问题是:如何在信号器和react之间执行数据绑定 我的第一条线索是: 信号员:Signalr react+中的数据绑定;信号员,signalr,reactjs,Signalr,Reactjs,我有一个战略问题 我想在我的网站上使用signalR更改数据,并使用react显示更改的数据。我的问题是:如何在信号器和react之间执行数据绑定 我的第一条线索是: 信号员: chat.client.addMessage = function (name, message) { chatHistory.push({ Author: name, Text: message }); //here I change global variable chatHistory }; 反应: va
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组件中,我输入全局聊天历史记录,并每2秒请求一个新值
还有更优雅的方式吗?
如果chatHistory变量没有更改,如何避免重新绘制CommentBox?您在CommentBox中维护状态的方法很好。随着组件库的增长,维护自更新组件可能会变得复杂。我建议调查React团队设计的通量架构,特别是他们的示例 如果您知道状态没有更改,可以实现以防止React重新呈现CommentBox。此外,您应该保留对间隔的引用,以便在卸载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);
},
...
});
唯一合适的方法是signar将在数据发生更改时告诉您(我不知道signar)在您的SignalR addMessage回调结束时立即重新呈现您的注释框?那么您可能不需要使用间隔。