通过 Socket.io 更新 React 状态
Posted
技术标签:
【中文标题】通过 Socket.io 更新 React 状态【英文标题】:Update React state via Socket.io 【发布时间】:2016-02-29 16:17:00 【问题描述】:我的 React 组件使用来自 socket.io 的数据作为它的状态。
我不确定如何在更新数据时只更新状态而不重新渲染整个组件。
示例代码。
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')
);
【问题讨论】:
【参考方案1】:你可以给componentDidMount
添加socket事件监听器,像这样
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()
);
【讨论】:
以上是关于通过 Socket.io 更新 React 状态的主要内容,如果未能解决你的问题,请参考以下文章
无法在 socket.io 回调 React.js 中调用 setState
React 和 Socket.io:能够获取初始数据 - 但是当有新帖子出现时视图不会更新
无法对未安装的组件执行 React 状态更新。 useEffect React-Native