多个React组件架构

Question

我正在创建一个消耗数据API的实时仪表板。该应用程序是一个构建在节点API之上的同构反应应用程序，我使用的是Flux架构，更具体地说是alt implementation。

我的问题是仪表板有大约4/5个实时图表（我正在使用a React D3 library)，每个图表都调用一个API端点。我有一个主<Dashboard />组件，并且每个图表组件都在其中。我的问题是<Dashboard />是否应该负责监听数据并将其作为道具传递或者每个图形组件应该对其自己的存储/动作生命周期负责？如果我通过道具传递数据，这将意味着用户界面会提交超过要求的内容吗？

我还没有找到React / Dashboard / Charting应用程序的任何示例，所以如果有人知道这些将非常有用。

Answer 1

最好将API访问保持在最高级别，并通过道具将所有内容传递下去。考虑将API中的数据放入商店，并使用它来驱动顶级组件。这样做的实际优势：

• 您现在可以自由地在多个地方使用相同的数据 - 它没有被困在子组件中
• 测试被简化，因为您可以传递一些虚拟道具并确认您获得了正确的结果
• 更容易推理：子组件不再需要关心其数据来源的实现细节

关于性能问题：考虑使用pure render mixin并仅更新需要更改的商店部分。这样，您的图表组件可以非常快速地告诉任何已更改的内容，并且如果没有任何更改，则不会重新呈现。