当前的方法是将整个书籍列表连接到书籍列表组件。然而，通过仅改变状态中的几个字段来渲染巨大的组件是不高效的。 我不知道如何映射每个书籍组件连接到每个人书状态。如何使用react redux单独连接阵列的每个元素

该项目使用的是REDX。这样

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

图书清单中组件的应用程序的全局状态，我们通过使用反应终极版

现在的需求变化，在图书领域也不会频繁地改变与它连接列表。问题是，如果一个字段被更改，它将更新整个BookListComponent。这不是我期待的高性能组件。

我想向下推，连接逻辑个别表成分才能使用reselect

状态可是没有书的索引，我不知道该怎么写连接，使其工作

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

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

来源

2017-02-27 Cloud tech

如果您使用'键'道具呈现您的书籍列表，则不需要太担心。您的物品将被跟踪并相应更新。然后，您还可以为'Book'组件编写'shouldComponentUpdate'函数来告知何时不应该重新呈现图书。 –

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

尽管连接顶层组件和传递道具的性能受到影响，但我还没有目睹它具有明显的不利影响。在我看来，通过代码追踪数据的好处总是值得的。有关于它的讨论here。

来源

2017-02-27 14:08:26 spirift

阵营只改领域

虽然是使每次更新一本书，这并不意味着整个列表进行重新渲染功能被称为是真实的更新。

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

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

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

来源

2017-02-27 14:13:52 Mycolaos

你的第二个例子是差不多是正确的。可以声明一个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显示了如何做到这一点一些例子，同时也讨论了在终极版应用程序性能的关键因素。

来源

2017-02-27 17:04:27 markerikson

但是，在减速器中，你仍然必须返回一个新的数组是否正确？而如果这个数组嵌套？例如'{books：[]，CD：[]}'？ –

如果要更新嵌套数据，则需要在执行更新时制作_all_嵌套级别的副本。有关示例，请参阅Redux文档中的[不可变更新模式]（https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns）部分。 – markerikson

如何使用react redux单独连接阵列的每个元素

回答

阵营只改领域

相关问题