React的基本组件元素是一个个组件，组件之间可能存在关联、组合等关系。不同的组件之间，经常会发生数据传递或者交换，我们称之为组件间通信。 根据传递的复杂程度，可以分为三种情况： 父子间通信，兄弟间通信，同其他外部库通信。

父子间通信

在学习组件的时候，props是输入，组件是输出。在这里的props，就是父向子传递的数据。而子向父传递数据，则是通过父级传递进来的props中的函数引用，间接的唤起父级处理函数，并传入参数。

/* 父组件 */
export default class NameInput extends Component {constructor(props) {super(props);this.state = {value: "default"};this.handleSubChange = this.handleSubChange.bind(this);}handleSubChange(newValue) {this.setState({ value: newValue });}render() {return (<div><div>{this.state.value}</div><Sub sub="sub1" subClick={this.handleSubChange} /></div>);}
}
复制代码

/* 子组件 */
export default class NameInput extends Component {constructor(props) {super(props);this.handleChange = this.handleChange.bind(this);}handleChange() {this.props.subClick("new sub");}render() {return <div onClick={this.handleChange}>{this.props.sub}</div>;}
}
复制代码

在这个例子里，通过调用props上传递进来的处理函数，达到了子向父传递数据的目的。

兄弟间通信

不使用其他库的话，借助React原生API，有两种方法：

通过父组件做中转 借用父组件以外，也可以使用react的Context API 关于Context API，我们还是先翻文档Context。

Context主要是为了处理多个组件可能需要获取同一组数据，例如文档中提到的theme，以及B端系统经常需要获取全局登录态，都可以使用ContextAPI。

在Context中，有两个重要的概念，Provider和Consumer。

Provider提供一个全局的数据源，订阅了它的数据源的Cusumer，不论节点嵌套多深都可以获取到Provider提供的数据。

看一个例子。

点我-CodeSandbox

在一些轻量级的应用中，基本上可以使用ContextAPI解决多级数据共享的问题。当然，如果要更强大，只能用Redux等库了。

关于Redux的使用，会在下一篇详细讲解。

同其他外部库通信

如果一个项目中，既有React，又有jQuery，又有Vue怎么办？怎么解决这种情形下得数据流转？

这是阿里的一道面试题，我那时没有怎么写过React，基本上就是zepto和小程序，面试官没有为难我，提了这样的问题。当时我提出了一种想法，发布订阅加适配器模式。下面简单说一下我的想法。

如果把这个场景抽象一下，可以看做是三种不同的组件需要相互通信，它们对数据的要求不一样，数据格式不同，但是一旦数据打到各自的组件内，其实数据流就不需要我们关心了。

所以可以维护一个公共的数据集市，所有人都从数据集市里取数据，也向数据集市中发数据，数据集市是一个公开的发布者，各组件为订阅者。

数据集市承担了适配的工作，对各个组件传进来的数据统一保存，在取数据时，根据组件的类型不同，派发不同形式的组件，这样，基本上就将组件间通信提升至了一个统一的数据集市，避免了组件的之间一对一通信。

当然，这和flux的思想也很类似，统一数据源，统一分发，只和数据源交互，避免了多个组件间复杂通讯带来的数据流混乱。

了解更多 本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。 最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。