React仅更新已更改的字段

Question

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

该项目正在使用redux。像这样的应用程序全局状态

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

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

连接列表

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

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

我想将连接逻辑推送到单个Book Component，以便使用reselect

状态没有书的索引，我不知道如何编写连接以使其工作

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

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

Answer 1

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

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

我的博文onActivityResult()展示了如何执行此操作的一些示例，并讨论了Redux中应用程序性能的关键注意事项。

Answer 2

您可以连接任何您喜欢的组件。没有严格的规则，您只能连接顶级组件。

虽然连接顶级组件和传递道具的性能受到打击，但我没有目睹它有明显的不利影响。在我看来，能够通过代码跟踪数据的好处总是值得的。对它进行了讨论here。

Answer 3

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

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

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