Aurelia + Reduxの性能

Question

私はAureliaを毎日使用しています。最近、私はReduxを使用することにしました（つまり、Aurelia + Reduxを使用して小さな試用版アプリケーションを2つ構築しました）、本当に感銘を受けました（私の開発ワークフローとアプリケーションに関する推論の明快さが大幅に改善されました）。私は実世界のアプリケーションに取り組んでみたいと思っています。

これは、パフォーマンスに関して懸念しています（パフォーマンスについての投稿を見てきましたが、問題のアドレスを直接見たことがありません）。私はこの質問がAurelia特有の問題ではないと考えています.Reduxについての質問と、それを非反応ライブラリと併用することです。

私はReduxの理解に私の質問を書いてみましょう（おそらく私の質問は間違った理解から本当に生じていますか？）。基本的に、私がReduxを理解する方法は、ストア（javascriptオブジェクト）とreduce関数があることです。今では、reduce関数は関数ツリー（ストア全体の特定のブランチを変更する責任を負う）として定義されていますが、実際にReduxは単一のreduce関数を受け取りますこの単一の関数を作成します）。本質的

@inject(Store) 
export class TodosListCustomElement { 
    constructor(store) { 
     this.store = store; 
    } 

    activate() { 
     this.update(); 
     this.unsubcribe = this.store.subscribe(this.update.bind(this)); 
    } 

    deactivate() { 
     this.unsubcribe(); 
    } 

    update() { 
     const newState = this.store.getState(); 

     this.todos = newState.todos; 
    } 

    toggleCompleted(index) { 
     this.store.dispatch({ 
      type: UPDATE_TODO, 
      payload: { 
       index, 
       values: { 
        isCompleted: !this.todos[index].isCompleted 
       } 
      } 
     }); 
    } 
} 

、コンポーネントツリーダウン各コンポーネント、変更を保存するためにそれ自体をサブスクライブし、ストアから必要なデータを更新：

私はReduxのを使用している方法は、そう（一例）と同様です。

私の懸念は、公開された各アクションで多くのことが起こっているようです。たとえば、私は、同様に大きな店舗とレデューサーツリーを持つ大規模なアプリケーションを持っているとします。ストアの1つのテキストフィールド（リストの1つの項目）に変更をディスパッチするテキストボックスがいくつかあるとします。これは、ユーザーがタイプすると、レデューサー関数全体が250ミリ秒ごとに実行されることを意味します（かなりの数の子孫レデューサーの実行を意味する可能性があります）。また、すべてのサブスクライブ関数も実行されます。基本的には、店の最も小さい部分でさえも変更するオーバーヘッドが多いようです。

モデルを更新するために、250msごとに実行する必要があるだけで、単一のバインド機能（変異オブザーバー）がある（アウレリアで）結合標準とのコントラストこれを...

私はReduxのに新しいですので、私は素朴に何かを誤解している可能性が高いと思います。私は事前に謝罪し、訂正する/正しい道をつけることを望みます（Reduxを使った私の限られた経験はとても楽しいですから）。

ありがとうございます。

Answer 1

あなたは実際に状況をさまざまなレベルで説明しています。

最初に、React-Reduxバインディングは、特定のコンポーネントに関連するデータの一部が変更されたときに、接続されたコンポーネントが実際に再レンダリングすることを保証するために多くの作業を行います。これは、接続されたコンポーネントに、mapStateToPropsという機能を提供させることによって行われます。この機能は、コンポーネントがストア状態から必要とするデータを抽出します。 connectによって生成されたラッパーコンポーネントは、各ディスパッチ後に関数mapStateを再実行し、最後に返された値と以前に返された値との比較を行い、データが変更されたかどうかを確認します。これにより、実行する必要のある実際のUI更新の量が削減されます。

接続フォームの処理方法には、トレードオフがあります。はい、1回のキーストロークごとにアクションをディスパッチすることは、全体的に非効率的である可能性があります。私は個人的に、これらのテキスト入力の変更をローカルでバッファリングするReactフォームラッパーコンポーネントを使用し、ユーザーが入力を完了した後にデバッグされたReduxアクションをディスパッチします。

最近、React-Reduxバインディングが書き直され、主にReactコンポーネントのロジックの大部分を持つのではなく、メモ付きセレクタ関数に基づいています。私はAureliaバインディングがどのように組み合わされているのか分かりませんが、Reactバインディングを最適化するために多大な労力を費やす可能性があります。

私はRedux関連のパフォーマンスに関するいくつかの記事に興味があるかもしれません。 Redux FAQの質問http://redux.js.org/docs/faq/Performance.html#performance-scalingと、私のReact/Reduxリンクリストの記事はhttps://github.com/markerikson/react-redux-links/blob/master/react-performance.md#redux-performanceです。