reactjs - React + Reflux - 同じストアを共有するコンポーネントのキューとタイムアウトの問題

Question

私はそのようなコンポーネントを持っています、

この例では、問題を説明するために valueLink を使用しないようにリファクタリングしました。

この例では、複数回 (3 回) レンダリングされた Field コンポーネントがすべて、ストア内の同じプロパティにバインドされています。コンセプトは非常にシンプルで、1 つの入力が変更されると、他の入力に反映されます。

問題が発生するのは、非常に高速に入力し (いくつかのキーを打ち込む)、イベントがキューに入れられ、各コンポーネントが別のコンポーネントからの以前の状態の更新に基づいて更新されるループで終了する場合です。ゆっくりと入力すると、キューのティックタイムアウトよりも遅くなると思いますが、正常に動作します。

同様の症状は、値リンクを使用して確認できます。しかし、それはほとんど同じことをしているので、私はそれを期待しています.

var App = React.createClass({

  render: function() {
    return  <Field dataItemName="PropertyA" />
        <Field dataItemName="PropertyA" />
        <Field dataItemName="PropertyA" />;
  }
});

var RecordStore = Reflux.createStore({
    mixins: [StateMixin],
    listenables: [FormActions, RecordActions],

    init: function () {        
    },

    getInitialState: function () {        
        return { PropertyA : 'test' };
    },

    valueChanged: function (newVal, propName) {        
        var o = {};
        if (newVal !== this.state[propName].value) {
            o[propName] = newVal;           
            this.setState(o);
        }
    }
});

var Field = React.createClass({
    mixins: [Reflux.ListenerMixin],
    getInitialState: function () {
        return ({           
            value: RecordStore.state[this.props.dataItemName].value          
        })
    },
    componentDidMount: function(){
        this.listenTo(RecordStore[this.props.dataItemName], this.updateValue);              
    },
    updateValue: function (value) {       
        this.setState({ value: value.value });
    },
    shouldComponentUpdate: function (nextProps, nextState) {     
        return  nextState.value != this.state.value;
    },
    componentDidUpdate: function (prevProps, prevState) {       
        RecordActions.valueChanged(this.state.value, this.props.dataItemName);
    },
    handleInput: function (event) {
        this.setState({ value: event.target.value });
    },
    render: function () {                  
       return (
         <div className='form-group'>
           <label htmlFor={this._reactInternalInstance._rootNodeID+'_input'}>{this.props.label}</label>
           <input className="form-control" value={this.state.value} id={this._reactInternalInstance._rootNodeID+'_input'} onChange={this.handleInput} />          
         </div>
        );
    }
});

ストアの値を更新する前に独自のタイムアウトを使用することを考えました。つまり、ユーザーが入力を完了するまで待機します。しかし、フレームワーク/ライブラリにそれを処理するものがあるかどうか疑問に思いましたか?

ありがとう