如何使用React Redux单独连接数组的每个元素

Question

当前方法是将整本书列表连接到书籍列表组件。但是，仅通过更改状态的几个字段来渲染巨大的组件并不是一个有效的效率。我不知道如何映射每个书籍组件连接到每个书本状态。

该项目使用Redux。像这样的应用全球状态

{
  "books": [
    {
      "field1": "field1",
      "field2": "field2",
      "field3": "field3",
    } ...
  ]
}

在书籍列表组件中，我们通过使用React Redux

将其连接起来

export default connect(state => ({
  books: state.books
}))(BookListComponent);

现在的要求更改，书中的字段不会经常更改。问题是，如果更改一个字段，它将更新整个BookListComponent。我期望那不是性能组件。

我想将Connect Logic推到单个书籍组件以使用Reselect

国家没有书的索引，我不知道如何写入连接以使其正常工作

export default connect(state => ({
  books[index]: state.books[index]
}))(BookListComponent);

感谢您的进步，欢迎所有选项

Answer 1

您的第二个示例是几乎正确。mapState函数可以声明为两个参数，而不是一个参数。如果声明了两个参数，Redux将拨打mapState功能，并将其提供给包装器组件的道具。因此，列表项目的mapState功能是：

const mapState = (state, ownProps) => {
    const book = state.books[ownProps.index];
    return {book}
}

我的博客文章实用的Redux，第6部分：连接的列表，表格和性能显示了一些有关操作的示例，还讨论了Redux中应用程序性能的关键注意事项。

Answer 2

您可以连接您喜欢的任何组件。您只能连接顶级组件。

没有硬的规则。

虽然连接顶级组件并将道具传递给我没有明显的有害效果的性能。在我看来，能够通过代码跟踪数据的好处总是值得的。这里有一个讨论。

Answer 3

react更新仅更改字段

确实每次更新一本书时都会调用渲染函数，但这并不意味着整个列表已重新渲染。

请记住，在React中，我们正在使用虚拟DOM。它允许我们仅更新实际更改的元素。

请看一下这篇文章（很简短并且在CodeOpen上具有工作代码示例）而且这个（更详细）https://facebook.github.io/react/docs/state-and-lifecycle.html

如果您已经阅读了这些文章，那么您知道您需要的只是检查应用程序并查看每个更改中实际呈现的内容。