侦听商店的反应列表和项目组件

时间:2015-09-05 18:49:34

标签: reactjs

假设我有一个显示一些用户详细信息的UserComponent。使用React + Flux + Immutable架构,我可以告诉它监听UserStore更改,以便它可以自行更新。

现在,如果我想显示用户列表,我可能希望重用此组件并在UserListComponent中使用它。这还需要监听UserStore,以便在从后备存储中添加/删除项目时添加/删除项目。

如果我有一个包含100个用户的列表,这将导致101个组件正在监听UserStore,并且可能有100个(项目)不需要,因为列表是代表他们这样做的。我应该采取什么方法来设计这种情况?或者这不是我需要担心的事情?

我仍然对React很新,我一直关注的样本没有考虑到这一点 - 例如TodoMVC有TodoItems不听商店,并依赖列表这样做代表他们。但是,这可以防止它们在列表之外使用,这似乎有点限制。

1 个答案:

答案 0 :(得分:1)

您可以将状态放在共同的祖先/所有者组件(您的列表)中,并且每个子组件(用户详细信息组件)将从该共同祖先派生/借用其状态 - 作为prop。 为了获得良好的性能,您可以将Immutable与componentShouldUpdate函数一起使用。