React作为前端的新一代主流框架，因其组件化的思想，彻底革新了前端停留在DOM操作的古老开发方式。使用React的组件，不再需要模板，也不用再过分担心渲染和更新带来的性能问题。开发一个个组件，就像一个个模块一般，在需要的地方放在那里就好。但是这么多的组件之间，如何进行信息交流和信息传递，就引发了一个新的问题——组件通信。
我是目录
- 事件通信
- 观察者模式
- 关于Redux与Flux
首先，我们先假设我们的组件结构如下：
Parent
____|____
| |
ChildA ChildB
1. 事件通信
1.1 父传子
在 React 中，父组件可以向子组件通过传 props 的方式，向子组件进行通讯。
class Parent extends Component {
state = { msg: 'start' };
componentDidMount() {
setTimeout(() => { this.setState({ msg: 'end' }); }, 1000);
}
render() {
// 将传递值当做组件的props属性传递给子组件
// return <ChildA msg={this.state.msg} />;
// 使用...运算符将父组件信息以更简洁的方式传递给子组件
return <ChildA {...this.state} />;
}
}
class ChildA extends Component {
render() {
// 获取父组件传递过来的数据中的msg
return <p>{this.props.msg}</p>;
}
}
export default Parent;
1.2 子传父
子组件向父组件通讯，同样也需要父组件向子组件传递 props 进行通讯，只是父组件传递的，是作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中。
class Parent extends Component {
state = { msg: 'start' };
transferMsg(childMsg) {
this.setState({ msg: childMsg });
}
render() {
return (
<div>
<p>{this.state.msg}</p>
// 将事件传递给子组件，子组件通过事件传递参数与父组件通信
<ChildA transferMsg={childMsg => this.transferMsg(childMsg)} />
</div>
);
}
};
class ChildA extends Component {
componentDidMount() {
setTimeout(() => { this.props.transferMsg('end'); }, 1000);
}
render() {
return <div />;
}
}
1.3 兄弟组件通信
对于没有直接关联关系的两个节点，就如 ChildA 与 ChildB 之间的关系，他们唯一的关联点，就是拥有相同的父组件。参考之前介绍的两种关系的通讯方式，如果我们向由 ChildA 向 ChildB 进行通讯，我们可以先通过 ChildA 向 Parent 组件进行通讯，再由 Parent 向 ChildB 组件进行通讯。
class Parent extends Component {
state = { msg: 'parent' };
transferMsg(childAMsg) {
this.setState({ msg: childAMsg });
}
componentDidUpdate() {
console.log('Parent is update'); // 测试更新State后哪些组件也被更新了生命周期
}
render() {
return (
<div>
<ChildA transferMsg={childAMsg => this.transferMsg(childAMsg)} />
<ChildB {...this.state} />
</div>
);
}
}
class ChildA extends Component {
componentDidMount() {
setTimeout(() => {
this.props.transferMsg('ChildA');
}, 1000);
}
componentDidUpdate() {
console.log('ChildA is update'); // 测试更新State后哪些组件也被更新了生命周期
}
render() {
return <div />;
}
}
class ChildB extends Component {
componentDidUpdate() {
console.log('ChildB update'); // 测试更新State后哪些组件也被更新了生命周期
}
render() {
return (
<div>
<p>I am ChildB, this is ChildA to parent and then to ChildB: {this.props.msg}</p>
<ChildBchild />
</div>
);
}
}
class ChildBchild extends Component {
componentDidUpdate() {
console.log('ChildBchild is update'); // 测试更新State后哪些组件也被更新了生命周期
}
render() {
return <div />;
}
}
当我们在浏览器运行时，可以从控制台发现，各个组件的 componentDidUpdate 方法均被触发。所以，有没有更好的解决方式呢？
2. 观察者模式
观察者模式也叫发布-订阅者模式，发布者发布事件，订阅者监听事件并做出反应。我们通过这种模式，在全局定义一个事件代理管理器，每一个组件只需要引入这个事件代理者即可。
事件代理文件，eventBus.js：
const eventBus = {
onObj: {},
// 事件监听
on(key, fn) {
this.onObj[key] === undefined && (this.onObj[key] = []);
this.onObj[key].push(fn);
},
// 事件关闭
off(key) {
this.onObj[key] = [];
this.oneObj[key] = [];
},
// 事件触发
trigger() {
/*
备注:
除了事件参数，其他参数允许传入数组，但对于传入的map结构、函数、以及多个其他参数都没有做处理，
这点可以根据个人需要进行拓展
*/
// 无参返回false
if (arguments.length === 0) {
return false;
}
// key是事件，args是参数 - 通信信息
const argumentsArr = [...arguments];
let key = argumentsArr[0];
let args = argumentsArr.slice(1);
if (this.onObj[key] !== undefined && this.onObj[key].length > 0) {
for (let i in this.onObj[key]) {
this.onObj[key][i].apply(null, args);
}
}
}
};
export default eventBus;
事件代理文件，eventBus.js：
class Parent extends Component {
render() {
return (
<div>
<ChildA />
<ChildB />
</div>
);
}
}
class ChildA extends Component {
componentDidMount() {
let hello = 'ChildA - 结束';
setTimeout(() => {
eventBus.trigger('change', hello);
}, 1000);
}
render() {
return <div></div>;
}
}
class ChildB extends Component {
state = {
msg: 'ChildB - 开始'
};
componentDidMount() {
eventBus.on('change', msg => {
this.setState({
msg
});
});
}
render() {
return (
<div>
<p>ChildA to ChildB component: {this.state.msg}</p>
</div>
);
}
}
3. 关于Redux与Flux
关于 Redux 与 Flux 就是用来管理状态和解决组件通信问题的。但虽然 Redux 对于组件间的解耦提供了很大的便利，如果你在考虑该不该使用 Redux 的时候，社区里有一句话说，“当你不知道该不该使用 Redux 的时候，那就是不需要的”。Redux 用起来一时爽，重构或者将项目留给后人的时候，就是个大坑，Redux 中的 dispatch 和 subscribe 方法遍布代码的每一个角落。虽然 Flux 设计中的 Controller-Views 概念就是为了解决这个问题出发的，将所有的 subscribe 都置于 Parent 组件（Controller-Views），由最上层组件控制下层组件的表现，然而，这不就是我们所说的子组件向父组件通讯这种方式了。
参考来源：淘宝-React组件通信原理
