1

我们正在我们的 react/redux 应用程序中实现性能优化。这些优化的一部分包括引入重新选择。这对于直接来自状态的数据非常有效。但是从其他道具派生的数据呢？

例子：

我们有 3 个组件Feed FeedItem和Contact（Contact 是用于显示用户联系信息的组件）。

aFeedItem获取表示提要中的项目的对象，提要项目的属性之一是参与者对象。这个对象就像一个用户，但有点不同（这很糟糕，但不能改变）。这意味着如果我想Contact为这个演员渲染一个，我需要创建一个新的对象，将演员的属性映射到用户。在每次渲染上创建一个新对象是一种性能反模式，因为我们使用的是浅相等检查。

例如代码：

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

有解决这个问题的模式吗？reselect 只支持从 redux state 派生数据，这基本上是从 props 派生的数据。

4

1 回答 1

3

你可以传递任何你想重新选择的选择器方法。它不必是状态和道具。这恰好是它最常见的用例。如果生成的选择器带有任意数量的参数，则可以调用它。

这是您可以使用它的一种方式：

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-14T16:52:00.543 回答