将商店监听器附加到React Flux中的子组件是否合适？

Question

我有一个名为“Flight booking”的组件和一个名为“Map”的子组件。我还有一个名为“MapStore”的商店及其行动。我可以将商店连接到子组件，还是必须将它连接到顶部组件以适应通量架构？

Answer 1

Flux架构说你应该有两种组件;

1. 容器：不接收来自父组件的道具，但连接到商店。

2. 组件：从父组件接收道具，但未连接到商店。

这种区别旨在帮助提高可读性并使代码更易于维护。遵循它通常是一个好主意。

但是，对于您的特定用例，您可以将Map组件作为任一类型。您只需要与处理数据的方式保持一致。你应该;

1. 使Map成为一个容器。它需要的任何值都应该存储在flux中，而不是作为props传递（这可能意味着重写一些FlightBooking方法以保存值，而不是它的内部状态）。

2. 让Map成为一个组件。 FlightBooking将负责从商店获取所需的任何价值并将其作为道具传递。

关于Drew的评论;确实，我列出的第二种方法将导致FlightBooking重新运行它的render方法。但你真的不应该为此担心太多。 React旨在有效地处理这些更新，并且除非检测到虚拟dom中的更改，否则实际上不会重新呈现DOM。这里对性能的影响微乎其微。

Answer 2

将子组件附加到商店是一种合适的策略。它在redux中很常见，实际上有一些性能优势。例如，如果您将顶部组件附加到MapStore，则必须在每次更改时重新呈现整个应用程序。 React使这个效率相对较高，但如果只有你的app的一个子集关注MapStore，那么首先尝试重新渲染该子集会更有效。