javascript - 如何设计一个监听 WebSocket 并与 CSS 动画交互的 ReactJS 组件

Question

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,
  ]),
};

Answer 1

如果 setTimeout 感觉不太好(我倾向于同意这种观点)，您可以使用 transitionend而是事件。

The transitionend event is fired when a CSS transition has completed. In the case where a transition is removed before completion, such as if the transition-property is removed or display is set to "none", then the event will not be generated.

除此之外，我真的没有发现您的方法有任何问题