两组件通信
在 React 中,组件之间的通信方式有很多。例如在父子组件中,父组件向子组件通信时,可以将参数写在props
传递给子组件;子组件向父组件通信时,可以使用回调函数的方式,父组件传递给子组件一个函数,子组件通过调用这个函数,实现向父组件通信。父子组件通信
假如有这样一些组件,A
组件下有B
组件和C
组件,B
组件下有D
组件,C
组件下有E
组件,如图所示:
如果需要D
组件向E组件通信,即D
组件向E
组件传值,可以将状态定义在公共的父组件A
上,分别向B
、C
组件传递参数和函数,再依次传递给D
组件和E
组件。D
组件可以调用函数,改变A
中的状态,同时也就会改变了E
组件的props
,实现了D
组件向E
组件的通信。这种方式实现起来可行,但太过于繁琐,如果组件嵌套得更深,代码将难以维护
另一种思路是可以将状态定义在redux
中,统一管理。E
组件使用redux
中的值,D
组件改变redux
中的值。但需求仅仅是实现D
组件向E
组件传值,就引入了redux
,显得没那么必要
还有一种解决方案,即使用消息订阅与发布机制,主要实现步骤:要实现D
组件向E
组件传值,在E
组件中,订阅消息,在D
组件中,发布相应的消息,E
组件中就会得到相应的数据。这种方式适合任意关系组件的通信。下面是 React 中消息订阅与发布机制的具体实现。
消息订阅与发布机制
1. 订阅消息
通过
PubSub.subscribe()
订阅消息,第一个参数为订阅的消息名称,可以自定义。第二个参数为订阅的回调函数,这个回调函数有两个参数。回调函数的第一个参数
msg
是订阅的消息名称,第二个参数data
是传递过来的数据
// 创建订阅的回调函数
var mySubscriber = function (msg, data) {
console.log(msg, data);
};
// 订阅
var token = PubSub.subscribe('MY TOPIC', mySubscriber);
2. 发布消息
通过
PubSub.publish()
发布消息,第一个参数为发布的消息名称,第二个参数为发布消息的数据,可以是对象、字符串、数字等类型。如果有人订阅了这个消息名称,当消息发布成功时,发布消息的数据就会被传到上述订阅消息的回调函数中,并被执行,拿到这个数据。
// 发布
PubSub.publish('MY TOPIC', 'hello world!');
3. 取消订阅
记得要在合适的时间取消订阅。
PubSub.unsubscribe(token);
实现
要实现的效果为,E
组件中点击add
,会增加计数值。点击D
组件的clear
按钮,会对E
组件的计数值进行清零。
首先在E
组件中引入pubsub-js
,并在useEffect
中订阅清零消息,组件卸载时清除副作用,取消订阅。
import PubSub from 'pubsub-js';
import { useState, useEffect } from 'react';
const E = () => {
const [count, setCount] = useState(0);
useEffect(() => {
// 订阅清零消息
const mySub = PubSub.subscribe('clearCount', clear);
return () => {
// 取消订阅
PubSub.unsubscribe(mySub);
};
}, []);
const clear = (msgName, data) => {
// msgName是订阅的消息名称
// data是发布消息时,传递的参数
// 这里我传递过来的是一个对象
console.log(msgName, data); // clearCount {count: 0}
const { count } = data;
setCount(count);
};
return (
<div>
我是E, 计数值:{count}
<button onClick={() => setCount(count => count + 1)}>add</button>
</div>
);
};
export default E;
D
组件中,点击clear
发布消息,传递一个对象
import PubSub from 'pubsub-js';
const D = () => {
const pubsub = () => {
// 发布消息
// 第一个参数为消息名称,clearCount
// 第二个参数为传递的参数,这里我传递一个对象
PubSub.publish('clearCount', { count: 0 });
};
return (
<div>
我是D
<button onClick={pubsub}>clear</button>
</div>
);
};
export default D;
如上代码所示,在D
组件中点击clear
按钮,就发布一条清零消息clearCount
,并传递一个对象,里面包含了count
值。在E
组件中,由于订阅过清零消息clearCount
,所以会执行回调函数,在回调函数的第二个参数data
中,拿到D
组件传递过来的count
值,并执行setCount(count)
,完成清零