javascript - Ako môžem obmedziť volania metód komponentu React pomocou RxJS

Mám nasledujúci TSX kód:

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

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

Chcem pomocou RxJS obmedziť volania this.onWheel, aby sa predišlo častým volaniam metódy.

Ako to môžem urobiť?

Odpoveď č. 1

Priame riešenie je použiť podmet:

• Vytvorte subjekt a prihláste sa naň s obmedzením pri načítaní komponentu
• Volať jeho metódu 'next' pri každej udalosti
• Odhlásiť sa pri odmontovaní komponentu

Kód s odstránenými symbolmi 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) {...}

Pozrite si tento jsfiddle pre fungujúci príklad.