通过 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

似乎无法通过空依赖数组影响 React 的 useEffect() 中的状态。套接字.io

React + Sails + Socket.io

如何通过 Express JS 服务器使 React JS 和 Socket IO 连接在一起?