如何使用react redux单独连接数组的每个元素

Question

目前的做法是将整个书单连接成书单组件。但是，仅通过更改状态中的几个字段来渲染巨大的组件效率不高。 我不知道如何将每个图书组件映射到每个单独的图书状态。

项目正在使用 redux。应用全局状态是这样的

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

在 Book List 组件中，我们使用 react redux 连接 list

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

现在需求变了，书里的字段不会经常变了。问题是，如果更改了一个字段，它将更新整个 BookListComponent。这不是我期望的高性能组件。

我想将连接逻辑下推到单个 Book 组件，以便使用 reselect

状态没有书的索引，我不知道怎么写connect来让它工作

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

感谢您的提前，欢迎所有选项

Answer 1

您可以连接任何您喜欢的组件。没有硬性规定只能连接顶级组件。

虽然连接顶级组件和向下传递道具会影响性能，但我没有看到它有明显的不利影响。在我看来，能够通过代码跟踪数据的好处总是值得的。有一个讨论here。

Answer 2

React 更新只更改了字段

虽然每次更新书籍时都会调用渲染函数，但这并不意味着整个列表都会重新渲染。

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

看看这篇文章（它很短，并且在 codeopen 上有工作代码示例）https://facebook.github.io/react/docs/rendering-elements.html 还有这个（更详细一点） https://facebook.github.io/react/docs/state-and-lifecycle.html

如果您阅读过这些文章，您就会知道您所需要的只是检查您的应用并查看每次更改时实际呈现的内容。

Answer 3

你的第二个例子几乎是正确的。 mapState 函数可以声明为采用两个参数而不是一个。如果声明了两个参数，Redux 将调用 mapState 函数，并使用提供给包装器组件的道具。因此，列表项的mapState 函数将是：

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

我的博文Practical Redux, Part 6: Connected Lists, Forms, and Performance 展示了一些如何做到这一点的示例，并讨论了 Redux 中应用程序性能的关键考虑因素。