Javascript 当React/Flux中有几个小的、可重复的子组件时，如何管理组件渲染

让React组件侦听中央存储的更新的流量模式非常好，但当您在同一页面上有许多小的、可组合的部分，需要从单个存储重新呈现时，似乎会出现问题。第一次检查时，似乎需要开发人员在两个选择之间进行权衡：创建一个父组件来管理这些较小的可重复组件的状态和呈现责任，而不是让每个组件管理自己的资源，但保持大量事件处理程序打开（每个重复组件一个）

举例来说，我现有的结构如下所示：

• 我有一个

  EventList

  组件，其中包含要作为子级渲染的

  Event

  组件的列表（可能有数百个）
• 渲染时，

  事件

  组件将

  AuthenticatedImage

  作为子组件

• AuthenticatedImage

  组件侦听

  TokenStore

  上的更改，并在发生更新时重新呈现（新的令牌，使用该令牌重新呈现）

TokenStore

很少更新，但我们肯定希望在这种情况下重新呈现所有

AuthenticatedImage

组件

这是一个两难的问题：如果我让每个

AuthenticatedImage

都监听

TokenStore

的更改，Javascript就会开始抱怨同一事件有大量的打开事件处理程序（也就是说，可能有数百个组件都监听同一事件）。相反，我可以让父级

EventList

组件侦听

TokenStore

的更新，但是

EventList

开始承担

AuthenticatedImage

的责任，并且

AuthenticatedImage

失去了可移植性

---

考虑到这些想法，在确保代码保持干净和可移植性的同时，如何确保在存储更改时重新呈现组件的多个实例，而不消耗过多的内存并激怒Javascript神

在flux thinking中，听起来您的

AuthenticatedImage

应该是一个纯组件=没有状态（也没有侦听器），只响应从父级传递下来的道具。通常建议您尽量在组件层次结构中将状态保持在较高的位置

如果只有一个映像需要响应新令牌，那么在组件中获取令牌并使其处于其状态是有意义的。但我不理解这种情况

通过集中令牌获取，

AuthenticatedImage

仍然可以非常方便地移植。它只会失去获取令牌的责任，但无论如何，这可能是一个好主意：显然有许多组件需要相同的令牌，因此集中获取令牌是一个合乎逻辑的步骤。尤其是当

AuthenticatedImage

以外的组件响应令牌时

它还使您的数据存储和组件保持一致：令牌的集中存储=令牌的集中获取。如果您还将每个令牌分别存储在每个图像实例中，那么将其放在

AuthenticatedImage

组件中是有意义的

---

您得到的回报是，令牌获取逻辑中的任何更改只需处理一次，而不需要在使用令牌的每个组件类中处理。

在flux思维中，听起来您的

AuthenticatedImage

应该是纯组件=没有状态（也没有侦听器）只对父母传下来的道具做出反应。通常建议您尽量在组件层次结构中将状态保持在较高的位置

如果只有一个映像需要响应新令牌，那么在组件中获取令牌并使其处于其状态是有意义的。但我不理解这种情况

通过集中令牌获取，

AuthenticatedImage

仍然可以非常方便地移植。它只会失去获取令牌的责任，但无论如何，这可能是一个好主意：显然有许多组件需要相同的令牌，因此集中获取令牌是一个合乎逻辑的步骤。尤其是当

AuthenticatedImage

以外的组件响应令牌时

它还使您的数据存储和组件保持一致：令牌的集中存储=令牌的集中获取。如果您还将每个令牌分别存储在每个图像实例中，那么将其放在

AuthenticatedImage

组件中是有意义的

您得到的回报是，令牌获取逻辑中的任何更改只需处理一次，而不是在使用令牌的每个组件类中进行处理。

查看并；您可能要求您的

AuthenticatedImage

组件做更多他们应该做的事情；您可能要求您的

AuthenticatedImage

组件做更多他们应该做的事情。