javascript - 複数のコンポーネントが保存ストア イベントをキャッチします

Question

入力としてURLを取得して解決する入力コンポーネントがあります（resolve =そのURLのプレビューを何らかの方法で取得します）：

var resolver = require('resolver');
var UrlResolver = React.createClass({
    statics: {
        storeListeners: {
            onResolverStore: [ ResolverStore ]
        }
    },
    getInitialState: function() {
        return { value: '', resolves: [] };
    },
    onResolverStore: function(data) {
        var resolves = [].concat(this.state.resolves, data);
        this.setState({ resolves: resolves });
    },
    handleChange: function(event) {
        var value = event.target.value;
        this.setState({ value: value });
        this.executeAction(resolver, value);
    },
    render: function () {
        return (
            <input value={ this.state.value } onChange={ this.handleChange } />
            {
                this.state.resolves.map(function(data) {
                    return <ResolveView data={ data } />;
                });
            }
        );
    }
});

ご覧のとおり、UrlResolver は ResolverStore の変更を待機します。このような変更は、入力に変更がある場合に発生する可能性があります。私の問題は、ビューに 10 個の UrlResolvers がある場合です。この状況では、1 つの入力が変更されると、ResolverStore が変更され、10 個の異なるイベントがトリガーされるため、10 個の異なる setStates が 10 回の再レンダリングを引き起こします。このすべてに対して、この変更を処理する必要があるのは 1 つの入力だけです。このようにして、9 つのコンポーネントは、それらに属さない解決データも追加します。

そのようなニーズに対する解決策は何ですか？