反応小道具から派生データを効率的に計算する

Question

反応/還元アプリケーションでパフォーマンスの最適化を実装するプロセスが進行中です。これらの最適化の一部には、再選択の導入が含まれていました。これは、状態から直接導出されたデータに対してうまく機能しました。他の小道具から得られたデータはどうですか？

例：

我々は3つの成分FeedFeedItemとContactを（問い合わせは、ユーザーが連絡先情報を表示するための成分である）を有します。

a FeedItemは、フィード内のアイテムを表すオブジェクトを取得します。フィードアイテムのプロパティの1つは、アクターオブジェクトです。このオブジェクトはユーザーに似ていますが、少し違っています（これはうまくいきますが変更できません）。これは、このアクタのためにContactをレンダリングする場合、アクタからユーザにプロパティをマップする新しいオブジェクトを作成する必要があることを意味します。浅い等価チェックを使用しているため、すべてのレンダリングで新しいオブジェクトを作成することはパフォーマンスのパターンになります。

例えばコード：

<Contact 
    user={{ 
    photoUrl: actor.photo.smallPhotoUrl, 
    Id: actor.id, 
    Name: actor.name, 
    }} 
</Contact> 

これを解決するためのパターンがありますか？再選択はredux状態からの派生データのみをサポートしますが、これは基本的には小道具からのデータです。

Answer 1

再選択のセレクタメソッドを渡すことができます。それは州や小道具である必要はありません。それはちょうどそれが最も一般的な使用事例です。任意の数の引数を持つセレクタが生成されている場合、そのセレクタを呼び出すことができます。

は、ここではそれを使用することができます一つの方法だ：私が正しく理解している場合

function convertActorToContactUser(actor) { 
    return { 
    photoUrl: actor.photo.smallPhotoUrl, 
    Id: actor.id, 
    Name: actor.name, 
    }; 
} 

class ActorContact extends Component { 
    constructor(...args) { 
    super(...args); 
    this.getUser = createSelector(
    () => this.props.actor, 
     convertActorToContactUser 
    ); 
    } 

    render() { 
    return <Contact user={this.getUser()} /> 
    } 
}