1.父组件通报值给子组件

想必这类人人都是晓得的吧！都想到了用我们react中的props,那末我在这简朴的写了小demo,请看
父组件

class Parent extends Component{
  render() {
    return (
      <Child text="Hello" />
    )
  }
}

子组件

class Child extends Component{
  render(){
    return (
      <p>{ this.props.text }</p>
    )
  }
}

2.子组件传值给父组件

相必人人在这里预计得想一想吧！那末由我一样写个小demo来关照人人,明白了实在也不难哦
父组件

class Parent extends Component {
  constructor(props) {
    super(props); 
    this.state = {
      someKey: 'world'
    };
  }
  fn(newState) {
    this.setState({ someKey: newState });
  }
  render() {
    return (
      <div>
        <Child pfn={this.fn.bind(this)} />
        <p>{this.state.someKey}</p>
      </div>
    );
  }
}

子组件

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

经由过程回调函数举行向父组件传值，并绑定父组件的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' });

是不是是如今以为组件通讯实在也没那末难明吧,加油吧，骚年