在React中,单向数据流通常是最佳实践。为了实现这一点,我们应该使用事件发射器。
您可以通过WebSockets、SSE或轮询从服务器获取JSON(无论哪种方式)。它们应该采用信封格式。以下是聊天应用程序的示例:
{
"type": "new-message",
"payload": {
"from": "someone",
"to": "#some-channel",
"time": 1415844019196
}
}
当你从服务器收到这条消息时,将其作为事件发出。
var handleMessage = function(envelope){
myEventEmitter.emit(envelope.type, envelope.payload);
};
这是一种调度器。它只是获取事件,并将其广播给任何感兴趣的人。通常,感兴趣的方可能是组件或存储(在Flux中)。
var MessageList = React.createClass({
componentDidMount: function(){
myEventEmitter.on('new-message', this.handleNewMessage);
},
handleNewMessage: function(message){
if (message.to === this.props.channel) {
this.setState({messages: this.state.messages.concat(message)});
}
},
componentWillUnmount: function(){
myEventEmitter.removeListener(this.handleNewMessage);
},
...
});
当用户提交消息时,您需要发出一个“user-new-message”事件。实现
handleMessage
的代码部分也会侦听此事件,将消息发送到服务器,并发出新消息事件,以便更新UI。
您还可以在代码的其他位置(而不是组件中)保留已收到的消息列表,或者请求从服务器获取最近的消息。
通常从服务器发送html是一个非常糟糕、不灵活和性能差的想法。AJAX用于将数据传输到客户端,客户端选择如何向用户呈现这些数据。