51.React学习 —— 组件通讯

组件通讯

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();
  
  

上一篇：组件生命周期
下一篇：组件的优化