React：将数据从通用 "data provider" 过滤器传递给兄弟姐妹的最佳方式

Question

我正在使用 React 创建一个 Analytics 网页（想想 Google Analytics-like）。

我有一个主要组件，它封装了可用的不同页面（一个概述，然后是具体的细分）。

function Analytics(props) {
  return (
    <div id="main" className="analytics">
      <AnalyticsFilter />
      <div id="content">
        <div id="contentsub">
          {props.children}
        </div>
      </div>
    </div>
  );
}

AnalyticsFilter 是一种过滤显示数据的方法 - 它对所有页面都是相同的，因此将其包含在此处。这个想法是显示数据的组件（props.children）会从过滤器请求它，然后过滤器会延迟加载数据（并可能缓存它），因为多个组件可能以不同的方式显示相同的数据（图表、表格、top10 等）。

我的问题：促进页面上任何组件与 AnalyticsFilter 组件之间通信的理想方式是什么？

过滤器将有 4-6 个不同的数据集可用（全部基于相同的过滤器参数），但我不想在不需要的页面（即特定视图）中查询所有这些数据集只关心特定的数据集）。

因此组件应该能够

请求特定类型的数据集，并且
过滤器参数更新时自动更新。

一切都是开放的，因为我刚刚开始（对 React 还很陌生）。 Analytics 此处的组件可以很容易地重写以包含更多功能，如果这样更容易的话。

Answer 1

我会看一下通量 flux architecture which fits perfectly with react. A good implementation of that architecture is redux。

基本概念是用户在您的视图中输入的所有内容都会触发一个操作，该操作在调度程序中处理并保存在商店中。商店触发然后视图重新呈现，例如调度程序将您的过滤器应用于数据，将过滤后的数据保存到商店，然后视图呈现过滤后的数据。

React：将数据从通用 "data provider" 过滤器传递给兄弟姐妹的最佳方式

React: Best way to pass data from a generic "data provider" filter to siblings

composition

reactjs