効率のためにReact/Reduxアプリを構築する

Question

クリップを含むトラックのテーブルを表示するオーディオワークステーションアプリをビルドします。今私はテーブルオブジェクトを返すテーブル減速器を持っています。テーブルオブジェクトはトラックオブジェクトを含み、トラックオブジェクトはクリップオブジェクトを含む。私はテーブルストアを購読するTableContainerを持っています。私の問題は、クリップが追加または操作されるたびにページがレンダリングされるため、アプリの効率が悪いと私は考えています。現実には、クリップが存在する特定のトラックだけが正しくレンダリングされる必要がありますか？私はどのようにすべての小さな変更は、アプリケーション全体をレンダリングしないように私のアプリを構造化することができますか？

Answer 1

反応の力は、仮想DOMを使用して比較を行い、shouldComponentUpdate関数を使用することによって、必要なものだけを再レンダリングすることです。

パフォーマンス上の問題が発生する前に、あまり詳しく見ないでしょう。

もしそうなら、トラックを別のディレクトリに保存し、それをアプリケーション（メイン）コンポーネントに渡さないでください。 ClipコンポーネントのmapStateToProps関数（react-reduxを使用している場合）では、状態からトラックを取得し、その名前をプロップから取得します。このようにトラックが大きく変化すると（例えばスライスの非同期フェッチのため）、コンポーネントだけが更新されます。

Answer 2

任意のコンポーネントのmapStateToPropsでは、親オブジェクト全体を選択してコンポーネントに送信しないでください。可能であれば、葉の値までのすべての方法で特定のプロパティを選択します。 TableContainerのrender()自体がtracks配列を使用しない場合は、使用する兄弟プロパティだけが渡されるようにしてください。

ので、代わりの：

function mapStateToProps(state, props) { 
    return { 
    table: state.tables[props.tableId]; 
    } 
} 

の操作を行います。

function mapStateToProps(state, props) { 
    let table = state.tables[props.tableId]; 
    return { 
    name: table.name, 
    type: table.type 
    }; 

これは、あなたのコンポーネントが再レンダリングする必要があるかどうかを決定することになるとReduxのは、もっと目の肥えたことに反応できます。 clipの変更によりtableが変更されても、nameもtypeも変更されていないことがわかります。

ただし、TableコンポーネントはTrackコンポーネントもレンダリングする可能性が高いため、レンダリングの呼び出しを避けることはできません。ツリー上の任意のプロパティが変更されると、tracks配列も変更されます。

tracks配列にtrackオブジェクト全体が含まれず、代わりにトラックIDのリストのみが含まれるようにすることです。その後、テーブルの横にトラックを保存することができ、一方の変更が他方のテーブルに影響することはありません。これは、TableコンポーネントのmapStateToPropsにトラックオブジェクトをフェッチして渡していない場合にのみ有効です。 Trackコンポーネントは、実際のオブジェクトではなくそのIDを受け入れるようにしてください。このようにして、Tableコンポーネントはトラックの内容にまったく依存しません。