在我们react项目日常开发中，往往会遇到这样一个问题：如何去实现跨组件通信？

为了更好的理解此问题，接下来我们通过一个简单的栗子说明。

实现一个视频播放器

假设有一个这样的需求，需要我们去实现一个简易的视频播放器，基于对播放器的理解，我们可以把这个视频播放器大致分为如下几个部分：

• 视频窗口组件Screen
• 底部播放控件BottomCtrl

对于视频窗口组件，它包含一个播放/暂停按钮CenterPlayBtn；而底部播放控件又是由以下几种组件组合而成：

• 播放/暂停按钮BottomPlayBtn
• 进度控制条ProgressCtrl
• 音量按钮Volume

于是乎它的构成应该如下图所示：

同样的，我们的组件组织方式应该也长这样：（这里简化了代码实现）

class MyVideo {render() {return (<div><Screen /><BottomCtrl /></div>)}
}// 底部视频控件
class BottomCtrl {render() {return (<div><BottomPlayBtn /><ProgressCtrl /><Volume /></div>)}
}// 视频窗口组件
class Screen {render() {return (<div><video /><ScreenPlayBtn /></div>)}
}
复制代码

对于视频播放器而言，有一个很常见的交互，即当我们点击屏幕中心的播放按钮CenterPlayBtn时，不仅需要改变自身的状态（隐藏起来），而且还要更新底部播放按钮BottomPlayBtn的样式

由于中心播放按钮与底部控件按钮分别属于Screen、BottomCtrl组件的部分，因此这就是一个很常见的跨组件通信问题：如何将CenterPlayBtn的状态同步到BottomPlayBtn?

方案一：祖先组件的状态管理

一个非常常用的方式，就是让祖先组件通过状态管理的方式把信息同步到其他子组件中：

class MyVideo {constructor(props) {super(props);this.state = {isPlay: false,}}updatePlayState = isPlay => {this.setState({ isPlay });}render() {const { isPlay } = this.state;return (<div><Screen updatePlayState={this.updatePlayState} isPlay={isPlay} /><BottomCtrl updatePlayState={this.updatePlayState} isPlay={isPlay} /></div>)}
}
复制代码

我们通过在祖先组件的state定义相应的状态，并把修改state的方法传递给了子组件，那么当一个子组件通过调用updatePlayState后，它所设置的新状态亦可通过react本身的state更新机制传递给其他的子组件，实现跨组件通信。

这种方案虽然简单，但在一些复杂的场景下却显得不够友好：

1. 状态和方法需要通过层层props传递到相应的子组件，一旦组件嵌套过深，不好编写与维护，且对于中间传递的组件而言，增加了不必要的逻辑；
2. 管理状态的祖先组件将变得更加臃肿。试想一下，假设我们为了实现两个嵌套很深的子组件的通信，却需要在祖先组件上去额外添加状态和方法，这增加了祖先组件的维护成本。

方案二：redux提供的跨组件通信能力

熟悉redux的童鞋都知道，redux提供的订阅发布机制，可以让我们实现任何两个组件的通信：首先我们需要在state上去添加一个key，在两个需要通信的组件上通过connect的封装，即可订阅key值的改变。

// CenterPlayBtn
class CenterPlayBtn {play() {this.props.updatePlayStatus();}
}const mapDispatchToProps = dispatch => {return {updatePlayStatus: isPlay => {dispatch(updatePlayStatus(isPlay))}}
}export default connect(null, mapDispatchToProps)(BottomPlayBtn)复制代码

class BottomPlayBtn {componentWillReceiveProps(nextProps) {if (this.props.isPlay !== nextProps.isPlay) {// do something}}
}const mapStateToProps = state => ({isPlay: state.isPlay
})export default connect(mapStateToProps, null)(BottomPlayBtn)
复制代码

使用redux的方式去实现跨组件通信是一种很常见的方式，在项目开发中也经常用到。那问题又来了，由于使用这种方案的前提是必须得在项目中加入redux，如果我的项目本来就比较简单，不需要使用到redux，难道为了实现两个组件简单的通信而要去做一系列redux的配置工作吗？这显然把简单的问题又复杂化了。

方案三：EventEmitter

EventEmitter也可以实现跨组件通信，当然这种基于事件订阅的设计模式本身也与react关系不大，但我们的项目很小的时候，使用EventEmitter也不失为一种简单且高效的方式：

class CenterPlayBtn {constructor(props) {super(props);event.on('pause', () => {// do something})}play() {event.emit('play');}
}class BottomPlayBtn {constructor(props) {super(props);event.on('play', () => {// do something})}pause() {event.emit('pause');}
}
复制代码

当然这种方案也是有缺陷的：

• 组织方式过于离散。发送者emit与接收者on分散在各个组件里，如果不细看每个组件的代码，我们难以从整体去观察、跟踪、管理这些事件；
• 有可能出现错过某个事件的情况。如果某个组件订阅该事件太晚，那发布者之前所发布的该类事件，它都接收不到，而方案一和二的优点则在于，无论如何，组件都能拿到该key的最终状态值；
• 有存在内存泄漏的风险。如果组件销毁了而不及时取消订阅，那就有内存泄漏的风险；

方案四：利用react原生的context实现跨组件通信

原生react提供了context，它的原文描述是这样的：

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

简单来说就是react提供了一种方式，让你可以跨多层嵌套组件去访问数据，而不需要手动的将props一个一个地传递下去。通过这种方式我们也可以实现跨组件通信方式，这个方案和方案一很相似，但区别在于我们无需手动将props传递给经历的每一个中间层组件。更为具体的用法可以直接参考官网示例，下面只是抛砖引玉，给出个简单示例：

首先我们定义一个player-context.js文件

import { createContext } from 'react';
const PlayerContext = createContext();
export default PlayerContext;
复制代码

然后在MyVideo组件中使用PlayerContext.Provider:

import PlayerContext from './player-context';class MyVideo {constructor(props) {super(props);this.state = {isPlay: false,updatePlayState: this.updatePlayState,}}updatePlayState = isPlay => {this.setState({ isPlay });}render() {return (<PlayerContext.Provider value={this.state}><Screen /><BottomCtrl /></PlayerContext.Provider>)}
}
复制代码

接着在需要消费数据的地方CenterPlayBtn和BottomPlayBtn中使用到它，这里只给出CenterPlayBtn的示例：

import PlayerContext from './player-context';class CenterPlayBtn {constructor(props) {super(props);}play() {this.props.updatePlayStatus(!this.props.isPlay);}componentWillReceiveProps(nextProps) {if (this.props.isPlay !== nextProps.isPlay) {// do something...}}
}export default props => (<PlayerContext.Consumer>{({isPlay, updatePlayStatus}) => <CenterPlayBtn {...props} isPlay={isPlay} updatePlayStatus={updatePlayStatus} />}
</PlayerContext.Consumer>)复制代码

其实个人认为这种方案是方案一的“增强版”：

• 首先它像方案一一样，对数据作了集中控制管理，即把提供数据内容和修改数据的能力集中到了上层组件身上，使得上层组件成为唯一的Provider，供下层各处的消费者Consumer使用；
• 其次它无须像方案一一样繁琐地将props手动向下传递；

总得来说，如果你的项目没有使用到redux的话，使用context是个不错的选择。

总结

上面列举的方案各有优劣，我们很难去判定哪种方案是最好的，而真正重要的，是要学会分析哪个场景下使用哪种方案更佳。

btw，其实跨组件通信的方式多种多样，远不止这些，本人才疏学浅，这里只能列举出一些自己常用的解决方案，希望此文能抛砖引玉，引出更棒的方案和见解:）