组件通讯
react组件通讯有三种方式.分别是props, context, pubsub
props
单向数据流 父传子
context
爷孙嵌套 传递
实现一:
-
调用 React. createContext() 创建 Provider(提供数据) 和 Consumer(消费数据) 两个组件
const { Provider, Consumer } = React.createContext('默认值') // 注意: 默认值是在没有提供provider的时候生效,而不是没有写value的时候生效
-
使用 Provider 组件作为父节点, 使用value属性定义要传递的值
<Provider value={要传递的值}> <div className="App"> <Child1 /> </div> </Provider>
-
使用Consumer组件接收数据
<Consumer>{data => <span>data参数表示接收到的数据 -- {data}</span>} </Consumer>
实现二:
export default class Demo extends Component {
// 给要使用的Context的Demo类,添加静态contextType属性, 并赋值为context对象
// 那么在Demo的实例对象上context属性中就可以获取到需要的值
static contextType = MyContext
render() {
// return <MyContext.Consumer>{data => <p>{data}</p>}</MyContext.Consumer>
return <div>{this.context}</div>
}
}
注意: 不要使用context随意传递数据,一般用于传递"全局"数据, 比如当前认证的用户、主题或首选语言
pubsub
发布订阅机制
pubsubjs是一个用JavaScript编写的库。
利用订阅发布模式, 当一个组件的状态发生了变化,可以让其他多个组件更新这些变化.
实现:
-
安装
在项目根目录下: npm install pubsub-js / yarn add pubsub-js
-
导入
import PubSub from "pubsub-js" // 导入的PubSub是一个对象.提供了发布/订阅的功能
-
pubsubjs提供的方法
// 一个用于接收订阅信息的函数(接收外部传入的数据的函数) // PubSub.subscribe() 用于订阅信息(相当于监听某个组件内部数据变化) // TOPIC ==> 订阅话题.推荐使用常量 // 第二个参数: 用于接收数据的函数 // token 这一次订阅的令牌(用于取消订阅) var token = PubSub.subscribe(TOPIC, function (msg, data) { console.log( msg, data ); }); // 以异步的形式的发布一个话题 // TOPIC 通过这个话题,找到订阅这个话题的订阅者 // 'hello world!' 具体要传递的数据 PubSub.publish(TOPIC, 'hello world!'); // 发布的同步使用方法 // 慎用!!!! 因为会阻塞发布者的代码执行 PubSub.publishSync(TOPIC, 'hello world!'); // 取消指定的订阅 PubSub.unsubscribe(token); // 取消某个话题的所有订阅 PubSub.unsubscribe(TOPIC); // 取消所有订阅 PubSub.clearAllSubscriptions();