5.React中組件通訊問題

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' });

是否是如今以爲組件通訊其實也沒那麼難懂吧,加油吧，騷年