4

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

我的问题是仪表板有大约 4/5 个实时图表（我使用的是 React D3 库），每个图表都调用一个 API 端点。我有一个主要<Dashboard />组件，其中每个图表组件都存在。我的问题是应该<Dashboard />负责监听数据并将其作为道具传递，还是每个图形组件都应该负责自己的存储/动作生命周期？如果我将数据作为道具传递，这是否意味着 UI 会重新渲染超过所需的内容？

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

4

1 回答 1

1

最好将 API 访问权限保持在顶层，并通过 props 将所有内容向下传递。考虑将 API 中的数据放入存储中，并使用它来驱动顶级组件。这样做的实际优势：

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

关于您关于性能的问题：考虑使用纯渲染混合并仅更新需要更改的商店部分。这样，您的图表组件可以非常快速地判断是否有任何更改，并且如果没有任何更改，则不会重新渲染。

于 2015-07-08T12:16:40.390 回答