有多种方法可以使组件进行通信。有些可以适合您的用例。这是我发现有用的一些清单。
反应
父母/子女直接沟通
const Child = ({fromChildToParentCallback}) => (
<div onClick={() => fromChildToParentCallback(42)}>
Click me
</div>
);
class Parent extends React.Component {
receiveChildValue = (value) => {
console.log("Parent received value from child: " + value); // value is 42
};
render() {
return (
<Child fromChildToParentCallback={this.receiveChildValue}/>
)
}
}
在这里，子组件将调用父组件提供的带有值的回调，并且父组件将能够获取父组件中子组件提供的值。
如果您构建应用程序的功能/页面，则最好由一个父级来管理回调/状态（也称为container或smart component），并且所有子级都必须是无状态的，只向父级报告情况。这样，您可以轻松地将“父母”的状态“共享”给需要它的任何孩子。
语境
React Context允许将状态保持在组件层次结构的根部，并且能够轻松地将此状态注入到嵌套很深的组件中，而不必麻烦将prop传递给每个中间组件。
到目前为止，上下文是一个实验性功能，但是React 16.3中提供了新的API。
const AppContext = React.createContext(null)
class App extends React.Component {
render() {
return (
<AppContext.Provider value={{language: "en",userId: 42}}>
<div>
...
<SomeDeeplyNestedComponent/>
...
</div>
</AppContext.Provider>
)
}
};
const SomeDeeplyNestedComponent = () => (
<AppContext.Consumer>
{({language}) => <div>App language is currently {language}</div>}
</AppContext.Consumer>
);
消费者正在使用 render prop / children功能模式
查看此博客文章以获取更多详细信息。
在React 16.3之前，我建议使用提供完全相似的API的react-broadcast，并使用以前的上下文API。
门户网站
当您希望将2个组件保持在一起以使它们与简单的功能进行通信时（如在正常的父/子中），请使用门户，但是您不希望这2个组件在DOM中具有父/子关系，因为暗示的视觉/ CSS约束（例如z-index，不透明度...）。
在这种情况下，您可以使用“门户”。有不同的使用门户的反应库，通常用于模式，弹出窗口，工具提示...
考虑以下：
<div className="a">
a content
<Portal target="body">
<div className="b">
b content
</div>
</Portal>
</div>
在内部渲染时可能会产生以下DOM reactAppContainer：
<body>
<div id="reactAppContainer">
<div className="a">
a content
</div>
</div>
<div className="b">
b content
</div>
</body>
在这里更多细节
插槽
您在某处定义一个插槽，然后从渲染树的另一个位置填充该插槽。
import { Slot, Fill } from 'react-slot-fill';
const Toolbar = (props) =>
<div>
<Slot name="ToolbarContent" />
</div>
export default Toolbar;
export const FillToolbar = ({children}) =>
<Fill name="ToolbarContent">
{children}
</Fill>
这与门户网站有点相似，除了填充的内容将在您定义的插槽中呈现，而门户网站通常呈现新的dom节点（通常是document.body的子代）。
检查反应槽填充库
活动巴士
如React 文档中所述：
要在没有父子关系的两个组件之间进行通信，可以设置自己的全局事件系统。订阅componentDidMount（）中的事件，取消订阅componentWillUnmount（）中的事件，并在收到事件时调用setState（）。
您可以使用许多东西来设置事件总线。您可以只创建一个侦听器数组，并且在事件发布时，所有侦听器都将接收该事件。或者，您可以使用EventEmitter或PostalJs之类的东西
助焊剂
助焊剂基本上是事件总线，但事件接收者是商店。这类似于基本事件总线系统，只不过状态是在React外部进行管理的
原始的Flux实现看起来像是尝试以一种怪异的方式进行事件源。
Redux对我而言，是最接近事件源的Flux实现，它受益于许多事件源优势，例如时间旅行能力。它没有严格地链接到React，也可以与其他功能视图库一起使用。
Egghead的Redux 视频教程非常好，并解释了它如何在内部工作（这很简单）。
游标
游标来自ClojureScript / Om，并广泛用于React项目。它们允许管理React外部的状态，并允许多个组件对状态的同一部分具有读/写访问权限，而无需了解组件树的任何知识。
存在许多实现，包括ImmutableJS，React-cursors和Omniscient
编辑2016年：似乎人们同意，游标在较小的应用程序上可以正常工作，但在复杂的应用程序上无法很好地扩展。Om Next不再具有游标（这是Om最初引入的概念）
榆木建筑
在榆树架构提出了一种架构，由使用榆树语言。即使Elm不是ReactJS，Elm架构也可以在React中完成。
Redux的作者Dan Abramov 使用React 实现了Elm架构的实现。
Redux和Elm都非常出色，并且倾向于在前端启用事件源概念，它们都允许时间旅行调试，撤消/重做，重播...
Redux和Elm之间的主要区别在于Elm在状态管理方面趋于严格得多。在Elm中，您不能具有本地组件状态或挂接/卸载挂接，并且所有DOM更改都必须由全局状态更改触发。Elm体系结构提出了一种可扩展的方法，该方法允许处理单个不可变对象内的所有状态，而Redux提供一种方法，邀请您在单个不可变对象中处理状态的MOST。
虽然Elm的概念模型非常优雅，并且该架构允许在大型应用程序上很好地扩展，但实际上可能会很困难或需要更多样板来完成简单的任务，例如在安装后将焦点集中在输入上或与现有库集成具有命令式界面（即JQuery插件）。相关问题。
而且，Elm体系结构涉及更多代码样板。编写起来并不是那么冗长或复杂，但是我认为Elm体系结构更适合于静态类型的语言。
玻璃钢
可以使用RxJS，BaconJS或Kefir之类的库来生成FRP流，以处理组件之间的通信。
您可以尝试例如Rx反应
我认为使用这些库与使用ELM语言提供的信号非常相似。
CycleJS框架不使用ReactJS，而是使用vdom。它与Elm架构有很多相似之处（但由于它允许使用vdom钩子，因此在现实生活中更易于使用），并且广泛使用RxJ而不是函数，并且如果您想将FRP与反应 CycleJs Egghead视频很高兴了解其工作原理。
CSP
CSP（通信顺序过程）当前很流行（主要是因为Go / goroutines和core.async / ClojureScript），但是您也可以在JS-CSP的 javascript中使用它们。
James Long制作了一个视频，解释了如何将其与React一起使用。
萨加斯
传奇是来自DDD / EventSourcing / CQRS世界的后端概念，也称为“流程管理器”。它被redux-saga项目推广，主要是作为redux-thunk的替代品，用于处理副作用（即API调用等）。当前，大多数人认为它仅用于副作用，但实际上更多是关于去耦组件。
它比起全新的通信系统更像是对Flux架构（或Redux）的补充，因为传奇最终会发出Flux动作。这样做的想法是，如果您具有widget1和widget2，并且希望将它们解耦，则无法从widget1触发定位到widget2的操作。因此，您使widget1仅触发以自身为目标的动作，并且传奇事件是侦听widget1动作的“后台进程”，并且可以调度以widget2为目标的动作。传奇是2个小部件之间的耦合点，但小部件保持解耦。
如果您有兴趣，请在这里查看我的答案
结论
如果要查看使用这些不同样式的同一小应用程序的示例，请检查此存储库的分支。
从长远来看，我不知道什么是最佳选择，但我真的很喜欢Flux看起来像事件源。
如果您不了解事件源的概念，请看一下这个非常有教育意义的博客：用apache Samza将数据库内翻，这是理解Flux为何不错的必读（但这也适用于FRP） ）
我认为社区同意最有前途的Flux实现是Redux，这得益于热重装，将逐步提供非常富有成效的开发人员体验。令人印象深刻的实时编码ala Bret Victor的Inventing on Principle视频是可能的！
