当React/Flux中有几个小的，可重复的子组件时，如何管理组件渲染 [英] How to manage component rendering when there are several small, repeatable sub-components in React/Flux

问题描述

让React组件侦听中央商店的更新的Flux模式很棒，但是当您在同一页面上有许多可组合的小部件需要从单个商店重新出售时，这似乎是一个问题.第一次检查时，似乎要求开发人员在两个选择之间进行权衡:创建一个父组件来管理状态以及这些较小的可重复组件的呈现责任，而不是让每个组件管理自己的资源，但拥有大量事件处理程序打开(每个重复的组件一个).

The Flux pattern of having React components listen for updates to a central store is great, but seems to present an issue when you have numerous small, composable parts all on the same page requiring re-renders from a single store. On first inspection, it looks like the developer is required to tradeoff between two choices: creating a parent component which manages state and the rendering responsibilities of these smaller, repeatable components vs having each component manage its own resources, but hold a large number event handlers open (one for each repeated component).

为了说明，我现有的结构看起来像这样:

To illustrate, my existing structure looks something like this:

• 我有一个EventList组件，其中包含(可能成百上千个)Event组件的列表，以呈现为子代.
• Event组件在渲染时包括AuthenticatedImage作为子组件.
• AuthenticatedImage组件侦听TokenStore上的更改，并在更新发生时重新渲染(新令牌，并使用该令牌重新呈现).

• I have an EventList component that contains a list of (potentially hundreds of) Event components to render as children.
• The Event component includes an AuthenticatedImage as a child component when rendering.
• The AuthenticatedImage component listens to changes on the TokenStore and re-renders when an update occurs (a new token, re-render with that token).

TokenStore很少更新，但是我们绝对希望在发生这种情况时重新呈现所有AuthenticatedImage组件.

TokenStore updates very rarely, but we definitely want to re-render all AuthenticatedImage components when this happens.

这是一个难题:如果我让每个AuthenticatedImage监听对TokenStore的更改，则Javascript开始抱怨我们对同一事件有大量打开事件处理程序(也就是说，可能有数百个组件都在监听到同一事件).相反，我可以让父级EventList组件侦听对TokenStore的更新，但是EventList开始拥有AuthenticatedImage的职责，并且AuthenticatedImage失去了可移植性.

Here's the dilemma: If I have each AuthenticatedImage listen for changes to the TokenStore, Javascript starts complaining that we have a large number of open event handlers to the same event (that is, potentially hundreds of components all listening to the same event). In contrast, I could have the parent EventList component listen for updates to TokenStore, but then EventList starts owning the responsibilities of AuthenticatedImage, and AuthenticatedImage loses its portability.

基于这些想法，在确保代码保持干净和可移植性的同时，确保在更改存储时重新呈现组件的多个实例，而又不消耗过多的内存和惹恼Javascript Gods的正确方法是什么?

Given these thoughts, what is the correct way to ensure that numerous instances of a component are re-rendered on a store change, without consuming exorbitant amounts of memory and angering the Javascript Gods, while ensuring code is kept clean and portable?

推荐答案

在通量思考中，听起来您的AuthenticatedImage应该是纯组件=不具有状态(也没有监听器)，并且仅响应传递的props来自父母.通常建议尽量在组件层次结构中保持较高的状态.

In flux-thinking, it sounds like your AuthenticatedImage should be a pure component = not having state (nor listeners) and only respond to props being passed down from parent. It is generally advised to try and keep state as high up in your component-hierarchy as possible.

如果只有一个图像需要响应新令牌，则在组件中及其状态下具有令牌获取将是有意义的.但这不是我理解的情况.

Having the token-fetch in a component and in its state would make sense if only one of the images needs to respond to the new token. But this is not the case I understand.

通过集中化令牌获取，AuthenticatedImage仍将非常可移植.它只是失去了获取令牌的责任，但是无论如何这可能是一个好主意:很明显，有许多组件都需要相同的令牌，因此集中令牌获取是一个合理的步骤.尤其是当AuthenticatedImage以外的组件响应令牌时.

By centralising token-fetching, AuthenticatedImage would still be quite portable. It only loses its responsibility to fetch the token, but this is probably a good idea anyway: there are evidently many components that need the same token, so centralising token fetching is a logical step. Especially if components other than your AuthenticatedImage respond to a token.

它还可以使您的数据存储和组件保持一致:令牌的集中存储=令牌的集中获取.如果您还将每个令牌与每个图像实例分开存储，则将其放在AuthenticatedImage组件中将很有意义.

It also keeps your data stores and components aligned: centralised storing of token = centralised fetching of token. Putting it in the AuthenticatedImage component would make sense if you would also store each token separately with each image instance.

作为回报，您只需对令牌获取逻辑中的任何更改进行一次处理，而无需在使用令牌的每个组件类中进行处理.

What you get in return is that any change in token-fetching logic needs to be processed only once, and not in each component-class that uses the token.

这篇关于当React/Flux中有几个小的，可重复的子组件时，如何管理组件渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！