从子组件收集数据

Question

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

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

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

我有一个静态的无状态菜单结构，以及构建视图。我可以在此菜单结构的根菜单项上调用方法getRequiredResources()，该方法将返回一组资源。

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

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

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

Answer 1

最好在组件树中保持尽可能高的状态。在您的情况下，最佳解决方案取决于菜单结构的动态条件的来源：

• 如果这些动态条件来自外部世界（例如，用户是否已登录）：
  • 将状态放在顶部菜单组件中，包括有关其子组件条件的所有信息。
  • 然后顶部组件仍然可以获取所有数据，并渲染动态菜单。
  • 这样可以保留仅获取菜单数据一次的要求。
  • 为此，您需要维护商店某处菜单条件的信息，以便传递给顶级组件。
• 如果动态条件来自菜单项（例如菜单中子项的复选框或过滤器）
  • 为子组件提供状态，让每个子组件根据该状态获取自己的组件。 （从加载状态，获取项目和重新渲染开始）。
  • 在这种情况下，您可能会两次获取相同的数据（因为孩子们不会相互沟通。
• 如果动态条件来自菜单组件和，则数据集不会过大或过于复杂（听起来不是这样满足您的需求）：
  • 您仍然可以在顶部获取所有内容，并仅在子项中使用状态进行过滤。
• 如果动态条件来自菜单，但您想要将状态保存在某处（例如，当用户重新访问页面时）：
  • 然后将状态保持在顶级组件中，以及所有动态子级条件。
  • 孩子们都是无国籍人，他们是道具。
  • 每当在孩子内部设置过滤器或类似物时，该孩子就会向调度员发起一个动作。然后，您需要在商店中的某处保存过滤条件。