Reactjs 如何使用react-redux分别连接数组的每个元素

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

该项目正在使用redux。应用程序的全局状态如下

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

在图书列表组件中，我们使用react-redux将列表与其连接

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

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

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

州政府没有这本书的索引，我不知道如何写连接使它工作

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

---

感谢您的支持，欢迎使用所有选项

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

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

React只更新更改的字段 虽然每次更新书籍时都会调用render函数，但这并不意味着整个列表都会重新呈现

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

看一看这篇文章（它很短，在codeopen上有工作代码示例） 还有这个（更详细一点）

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

你的第二个示例几乎是正确的。

mapState

函数可以声明为采用两个参数而不是一个参数。如果声明了两个参数，Redux将使用提供给包装器组件的props调用该

mapState

函数。因此，列表项的

mapState

函数是：

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

---

我的博客文章展示了一些如何做到这一点的示例，并讨论了Redux中应用程序性能的关键注意事项。

如果您使用

键

道具呈现图书列表，您不必太担心。您的项目将被跟踪并相应更新。然后，您还可以为

Book

组件编写

shouldComponentUpdate

函数，告知何时不应重新渲染书本。但是，在reducer中，您仍然必须返回一个新数组，正确吗？如果这个数组是嵌套的呢？e、 g.

{books:[]，CDs:[]}

？如果要更新嵌套数据，则需要在更新时复制所有级别的嵌套。有关示例，请参见Redux文档中的部分。