Websocket 通过Socket.io更新React状态
我的React组件使用socket.io中的数据作为状态 我不确定在更新数据时如何只更新状态而不重新呈现整个组件 示例代码Websocket 通过Socket.io更新React状态,websocket,socket.io,reactjs,Websocket,Socket.io,Reactjs,我的React组件使用socket.io中的数据作为状态 我不确定在更新数据时如何只更新状态而不重新呈现整个组件 示例代码 var socket = io(); var data = { components: [{key: '',name: '',markup: ''}] }; socket.on('data', function(_) { data = _; }); var Components = React.createClass({ displayName: "Co
var socket = io();
var data = {
components: [{key: '',name: '',markup: ''}]
};
socket.on('data', function(_) {
data = _;
});
var Components = React.createClass({
displayName: "Components",
getInitialState: function getInitialState() {
return data;
},
handleChange: function handleChange() {
this.setState(data);
},
render: function render() {
/* render */
}
});
ReactDOM.render(
React.createElement(Components, {
data: data
}),
document.getElementById('main')
);
您可以将套接字事件侦听器添加到
组件didmount
,如下所示
var socket = io();
var data = {
components: [{key: '',name: '',markup: ''}]
};
var Components = React.createClass({
displayName: "Components",
componentDidMount: function () {
socket.on('data', this.handleData);
},
componentWillUnmount: function () {
socket.removeListener('data', this.handleData);
},
handleData: function (data) {
this.setState(data);
},
getInitialState: function () {
return data;
},
handleChange: function handleChange() {
this.setState(data);
},
render: function render() {}
});