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

Question

我有以下 TSX 代码:

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

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

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

我该怎么做？

Answer 1

直接的解决方案是使用主题:

• 创建主题并通过组件挂载限制订阅它
• 在每个事件上调用它的“下一个”方法
• 取消订阅组件卸载

删除了 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一个工作示例。