如何设计一个ReactJS组件,用于侦听WebSocket并与CSS动画交互

ReactJS组件需要侦听WebSocket发出的事件。

对于每个入站事件,组件应该呈现一个DOM节点。

然后,它应该等待与DOM节点关联的CSS动画完成,然后删除DOM节点。

这种方法看起来可行吗?

这个 setTimeout 感觉很糟糕。

class MyComponent extends React.PureComponent {
 componentDidMount() {
    this.props.webSocket.on('myEvent', componentDidReceiveEvent)
  }

  componentWillUnmount() {
    this.props.webSocket.off('myEvent', componentDidReceiveEvent)  
  }

  // is this method style valid syntax?
  componentDidReceiveEvent = limit((evt) => {
    this.state.setState((prev, props) => {
      return {
        ...prev,
        inboundEvents: [...prev.events, evt]
      };
      setTimeout(function() {
        // use Array API to remove evt from the 
        // inboundEvents array on this.state
      }, DURATION_OF_CSS_ANIMATION);
    });
  })

  render() {
    return (<div>
      {this.state.events.map(e => <MyNode key={evt.id} />)}
    </div>);
  }
}

MyComponent.propTypes = {
  id: React.PropTypes.string,
  webSocket: React.PropTypes.oneOfType([
    React.PropTypes.bool,
    React.PropTypes.object,
  ]),
};