从子组件收集数据答案

【问题标题】：Collect data from child components从子组件收集数据
【发布时间】：2016-01-19 04:20:39
【问题描述】：

对于我的第一个 React 应用程序，我需要显示一个包含组项、读取项和写入项的菜单层次结构（还有更多，但这对于本示例来说已经足够了）。

每个读取项和写入项都连接到 JSON API 中的一个数据点：每个项都有一个资源（例如 /api/1.0/fruits）和一个 json 路径（例如 data.color）。

显示菜单时，应从 Web 服务中获取所有值。但我不希望每个项目都独立获取其值，因为在典型情况下，相同的资源会被多次读取。

我还有一个静态的、无状态的菜单结构，以及构建视图的基础。我可以在这个菜单结构的根菜单项上调用一个方法getRequiredResources()，它会返回一组资源。

但后来我引入了动态菜单项，因此根据菜单项的状态需要不同的资源。我不能再使用静态菜单结构来收集所有需要的资源，因为它不知道每个项目的状态。

关于如何处理这个问题的任何提示？如果我可以访问子菜单项组件，它们拥有足够的状态来返回所需资源的列表，但我认为这不是推荐的模式......？

我使用 Flux 架构进行数据流。

【问题讨论】：

我正在考虑让每个组件在需要时排队获取资源。安装后，它们会立即将此类获取请求放入队列中。这是一种理智的处理方式吗？你将如何实施它？作为通量动作？队列应该放在哪里？应该什么时候处理队列？

【解决方案1】：

在组件树中保持尽可能高的状态是一种很好的做法。您的最佳解决方案取决于菜单结构动态条件的来源：

如果这些动态条件来自外部世界（例如，用户是否登录）：
- 将状态放在顶部菜单组件中，包括有关其子组件状况的所有信息。
- 然后顶部组件仍然可以获取所有数据，并呈现动态菜单。
- 这可以满足您只获取一次菜单数据的要求。
- 为此，您需要维护有关商店某处菜单状况的信息，以传递给顶部组件。
如果动态条件源自菜单项内（例如，菜单内子项的复选框或过滤器）
- 给子组件状态，并让每个子组件根据该状态获取他们自己的东西。（从加载状态开始，获取项目并重新渲染）。
- 在这种情况下，您可能会获取相同的数据两次（因为孩子之间不会相互交流。
如果动态条件源自菜单组件并且您的数据集不是太大或太复杂（听起来像这样满足您的需求）：
- 您仍然可以获取顶部的所有内容，并将子级内部的状态仅用于过滤目的。
如果动态条件源自菜单内，但您希望将状态保存在某处（例如，当用户重新访问页面时）：
- 然后将状态保留在顶级组件中，以及所有动态子条件。
- 孩子都是无国籍的，一切都作为道具传递。
- 只要在子级内部设置了过滤器或类似内容，该子级就会向调度程序触发一个操作。然后，您还需要将过滤条件保存在商店的某个位置。

【讨论】：