5.React中组件通信问题

zhangxiangliang 发布于2019-08-22 15:48 / 1709人阅读

摘要：对于事件系统，这里有个基本操作步骤订阅监听一个事件通知，并发送触发发布发送一个事件通知那些想要的组件。看例子吧，很好理解在处理事件的时候，需要注意在事件中，如果组件挂载完成，再订阅事件当组件卸载的时候，在事件中取消事件的订阅。

1.父组件传递值给子组件

想必这种大家都是知道的吧！都想到了用我们react中的props,那么我在这简单的写了小demo,请看
父组件

class Parent extends Component{
  render() {
    return (
      
    )
  }
}

子组件

class Child extends Component{
  render(){
    return (
      { this.props.text }
    )
  }
}

2.子组件传值给父组件

相必大家在这里估计得想一想吧！那么由我同样写个小demo来告诉大家,理解了其实也不难哦
父组件

class Parent extends Component {
  constructor(props) {
    super(props); 
    this.state = {
      someKey: "world"
    };
  }
  fn(newState) {
    this.setState({ someKey: newState });
  }
  render() {
    return (
      
        
        {this.state.someKey}
      
    );
  }
}

子组件

class Child extends Component {
  constructor(props) {
    super(props); 
    this.state = {
      newState: "Hello"
    };
  }
  someFn() {
    this.props.pfn(this.state.newState);//这里就是传值给父组件
  }
  render() {
    return (
      点我
    );
  }
}

通过回调函数进行向父组件传值，并绑定父组件的this this.fn.bind(this)

3.有任何嵌套关系的组件之间传值

如果组件之间没有任何关系，组件嵌套层次比较深（个人认为 2 层以上已经算深了），或者你为了一些组件能够订阅、写入一些信号，不想让组件之间插入一个组件，让两个组件处于独立的关系。对于事件系统，这里有 2 个基本操作步骤：订阅（subscribe）/监听（listen）一个事件通知，并发送（send）/触发（trigger）/发布（publish）/发送（dispatch）一个事件通知那些想要的组件。

下面讲介绍 3 种模式来处理事件，你能点击这里来比较一下它们。

简单总结一下：

(1) Event Emitter/Target/Dispatcher

特点：需要一个指定的订阅源

// to subscribe
otherObject.addEventListener(‘click’, function() { alert(‘click!’); });
// to dispatch
this.dispatchEvent(‘click’);

(2) Publish / Subscribe

特点：触发事件的时候，你不需要指定一个特定的源，因为它是使用一个全局对象来处理事件（其实就是一个全局广播的方式来处理事件）

// to subscribe
globalBroadcaster.subscribe(‘click’, function() { alert(‘click!’); });
// to dispatch
globalBroadcaster.publish(‘click’);

(3) Signals

特点：与Event Emitter/Target/Dispatcher相似，但是你不要使用随机的字符串作为事件触发的引用。触发事件的每一个对象都需要一个确切的名字（就是类似硬编码类的去写事件名字），并且在触发的时候，也必须要指定确切的事件。（看例子吧，很好理解）

// to subscribe
otherObject.clicked.add(function() { alert(‘click’); });
// to dispatch
this.clicked.dispatch();

在处理事件的时候，需要注意：
在 componentDidMount 事件中，如果组件挂载（mounted）完成，再订阅事件；当组件卸载（unmounted）的时候，在 componentWillUnmount 事件中取消事件的订阅。

看了上面所述,是否有所感悟
例如通过事件来进行非父子组件间的通信，如果操作不是很多，我们可以自己动手简单实现以下哦！
下面我简单的写了一个,请看

简单实现了一下 subscribe 和 dispatch

let EventEmitter = {
  _events: {},
  dispatch: function (event, data) {
    if (!this._events[event]) { // 没有监听事件
      return;
    }
    for (var i = 0; i < this._events[event].length; i++) {
      this._events[event][i](data);
    }
  },
  subscribe: function (event, callback) {
    // 创建一个新事件数组
    if (!this._events[event]) {
      this._events[event] = [];
    }
    this._events[event].push(callback);
  }
};

otherObject.subscribe("namechanged", (data) => console.log(data.name));
this.dispatch("namechanged", { name: "John" });

是不是现在觉得组件通信其实也没那么难懂吧,加油吧，骚年

云服务器 GPU云服务器组件和组件通信组件通信组件之间通信父子组件通信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93771.html

5.React中组件通信问题

摘要：对于事件系统，这里有个基本操作步骤订阅监听一个事件通知，并发送触发发布发送一个事件通知那些想要的组件。看例子吧，很好理解在处理事件的时候，需要注意在事件中，如果组件挂载完成，再订阅事件当组件卸载的时候，在事件中取消事件的订阅。 1.父组件传递值给子组件想必这种大家都是知道的吧！都想到了用我们react中的props,那么我在这简单的写了小demo,请看父组件 class Parent...

Joyven 2019-08-30 14:18 评论0 收藏0
5.React中组件通信问题

摘要：对于事件系统，这里有个基本操作步骤订阅监听一个事件通知，并发送触发发布发送一个事件通知那些想要的组件。看例子吧，很好理解在处理事件的时候，需要注意在事件中，如果组件挂载完成，再订阅事件当组件卸载的时候，在事件中取消事件的订阅。 1.父组件传递值给子组件想必这种大家都是知道的吧！都想到了用我们react中的props,那么我在这简单的写了小demo,请看父组件 class Parent...

Taonce 2019-08-02 10:02 评论0 收藏0
react进阶漫谈

摘要：父组件向子组件之间非常常见，通过机制传递即可。我们应该听说过高阶函数，这种函数接受函数作为输入，或者是输出一个函数，比如以及等函数。在传递数据的时候，我们可以用进一步提高性能。本文主要谈自己在react学习的过程中总结出来的一些经验和资源，内容逻辑参考了深入react技术栈一书以及网上的诸多资源，但也并非完全照抄，代码基本都是自己实践，主要为平时个人学习做一个总结和参考。本文的关键...

neuSnail 2019-08-20 14:16 评论0 收藏0
react进阶漫谈

摘要：父组件向子组件之间非常常见，通过机制传递即可。我们应该听说过高阶函数，这种函数接受函数作为输入，或者是输出一个函数，比如以及等函数。在传递数据的时候，我们可以用进一步提高性能。本文主要谈自己在react学习的过程中总结出来的一些经验和资源，内容逻辑参考了深入react技术栈一书以及网上的诸多资源，但也并非完全照抄，代码基本都是自己实践，主要为平时个人学习做一个总结和参考。本文的关键...

wyk1184 2019-08-30 15:52 评论0 收藏0
react进阶漫谈

摘要：父组件向子组件之间非常常见，通过机制传递即可。我们应该听说过高阶函数，这种函数接受函数作为输入，或者是输出一个函数，比如以及等函数。在传递数据的时候，我们可以用进一步提高性能。本文主要谈自己在react学习的过程中总结出来的一些经验和资源，内容逻辑参考了深入react技术栈一书以及网上的诸多资源，但也并非完全照抄，代码基本都是自己实践，主要为平时个人学习做一个总结和参考。本文的关键...

junnplus 2019-08-01 16:17 评论0 收藏0