从反应道具中有效计算派生数据

我们正在我们的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

从反应道具中有效计算派生数据

回答

相关问题