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

时间:2016-09-19 03:23:16

标签: reactjs flux

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

2 个答案:

答案 0 :(得分:2)

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

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

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

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

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

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

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

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

答案 1 :(得分:1)

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