如何设计一个侦听 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事件。

转换结束事件在 CSS 过渡完成时触发。如果在完成之前删除了过渡，例如删除了过渡属性或将显示设置为"none"，则不会生成事件。

除此之外，我真的看不出你的方法有什么问题

Answer 2

使用通量

您可以在应用程序启动器(通常是 App.js/index.js 或类似内容(中将侦听器添加到 websocket。 当数据进入 websocket 时，只需调用触发存储更新的 Flux 操作。 React 组件可以有一个存储侦听器，并知道何时更新组件状态和重新渲染。