從反應道具中有效計算派生數據

我們正在我們的react/redux應用程序中實施性能優化。部分優化包括引入重選。這對於直接從狀態派生的數據非常有效。但是從其他道具派生的數據呢？從反應道具中有效計算派生數據

實施例：

我們有3個部件FeedFeedItem和Contact（聯繫是用於顯示用戶的聯繫人信息的分量）。

a FeedItem獲取表示供稿中項目的對象，供稿項目的其中一個屬性是演員對象。這個對象就像一個用戶，但有點不同（這很糟糕，但不能改變）。這意味着如果我想爲該演員渲染一個Contact，我需要創建一個新的對象，將屬性從演員映射到用戶。在每個渲染上創建一個新對象是一種性能反模式，因爲我們正在使用淺層平等檢查。

e.g代碼：

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

是否有解決這個模式？重新選擇僅支持來自redux狀態的派生數據，這基本上是從道具派生的數據。

來源

2016-12-14 davegri

不知道如果我理解正確的，但重新選擇能夠選擇的道具：https://github.com/reactjs/reselect#accessing-react -props-in-selectors – janhartmann

這是針對狀態和道具，我只是想根據道具有效地計算派生數據 – davegri

你可以通過你想要重新選擇的選擇器方法。它不一定是國家和道具。這恰好是最常見的用例。如果使用任意數量的參數生成選擇器，則可以調用它。

這裏有一種方法，你可以使用它：

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()} /> 
    } 
}

來源

2016-12-14 16:52:00

這是一個常見用例嗎？這種模式似乎對我來說很有意思，你會如何解決它？ – davegri

我添加了一個例子。 –

謝謝！所以這隻會在this.props.actor改變時重新計算？ – davegri

從反應道具中有效計算派生數據

回答

相關問題