Обновить состояние React через Socket.io

Мой компонент 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')
);

reactjs socket.io websocket
person Brian Douglas    schedule 26.11.2015    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Вы можете добавить прослушиватель событий сокета в componentDidMount, например

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() {}
});
person Oleksandr T.    schedule 26.11.2015