我如何通过RxJS限制对React组件方法的调用

Question

我有以下TSX代码：

public render() {    
  return (
    <div onWheel={this.onWheel}>
      {children}
    </div>
  );
}

private onWheel(event: React.SyntheticEvent<HTMLDivElement>) {...}

我想限制使用RxJS的 this.onWheel调用，以防止频繁的方法调用。

我怎样才能做到这一点？

Answer 1

直接的解决方案是使用Subject：

• 创建主题并通过节制组件订阅来订阅它
• 在每个事件上调用其“ next”方法
• 取消订阅组件卸载

带有删除的TS符号的代码：

render() {    
  return (
    <div onWheel={e => this.onWheel$.next(e)}>
      {children}
    </div>
  );
}

componentWillMount() {
    this.onWheel$ = new Rx.Subject();
    this.onWheel$.throttleTime(500).subscribe(this.onWheel);
}

componentWillUnmount() {
    this.onWheel$.unsubscribe();
}

onWheel(event) {...}

有关工作示例，请参见此jsfiddle 。