5

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

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

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

在 Book List 组件中，我们使用 react redux 将 list 与它连接起来

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

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

我想将连接逻辑下推到单个图书组件，以便使用重新选择

该州没有这本书的索引，我不知道如何编写连接以使其工作

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

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

4

3 回答 3

3

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

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

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

于 2017-02-27T17:04:27.807 回答
0

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

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

于 2017-02-27T14:08:26.443 回答
0

反应更新仅更改了字段

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

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

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

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

于 2017-02-27T14:13:52.737 回答