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

我有以下TSX代码：

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

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

我想使用RxJS来限制this.onWheel调用，以防止频繁的方法调用。
我该怎么做呢？

最佳答案

直接的解决方法是使用一个主题：
创建主题并在组件装载时使用限制订阅它
对每个事件调用其“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。