5.React中組件通信問題

zhangxiangliang 發(fā)布于2019-08-22 15:48 / 1730人閱讀

摘要：對于事件系統(tǒng)，這里有個基本操作步驟訂閱監(jiān)聽一個事件通知，并發(fā)送觸發(fā)發(fā)布發(fā)送一個事件通知那些想要的組件?？蠢影?，很好理解在處理事件的時候，需要注意在事件中，如果組件掛載完成，再訂閱事件當(dāng)組件卸載的時候，在事件中取消事件的訂閱。

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 (
      點我
    );
  }
}

通過回調(diào)函數(shù)進(jìn)行向父組件傳值，并綁定父組件的this this.fn.bind(this)

3.有任何嵌套關(guān)系的組件之間傳值

如果組件之間沒有任何關(guān)系，組件嵌套層次比較深（個人認(rèn)為 2 層以上已經(jīng)算深了），或者你為了一些組件能夠訂閱、寫入一些信號，不想讓組件之間插入一個組件，讓兩個組件處于獨立的關(guān)系。對于事件系統(tǒng)，這里有 2 個基本操作步驟：訂閱（subscribe）/監(jiān)聽（listen）一個事件通知，并發(fā)送（send）/觸發(fā)（trigger）/發(fā)布（publish）/發(fā)送（dispatch）一個事件通知那些想要的組件。

下面講介紹 3 種模式來處理事件，你能點擊這里來比較一下它們。

簡單總結(jié)一下：

(1) Event Emitter/Target/Dispatcher

特點：需要一個指定的訂閱源

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

(2) Publish / Subscribe

特點：觸發(fā)事件的時候，你不需要指定一個特定的源，因為它是使用一個全局對象來處理事件（其實就是一個全局廣播的方式來處理事件）

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

(3) Signals

特點：與Event Emitter/Target/Dispatcher相似，但是你不要使用隨機的字符串作為事件觸發(fā)的引用。觸發(fā)事件的每一個對象都需要一個確切的名字（就是類似硬編碼類的去寫事件名字），并且在觸發(fā)的時候，也必須要指定確切的事件。（看例子吧，很好理解）

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

在處理事件的時候，需要注意：
在 componentDidMount 事件中，如果組件掛載（mounted）完成，再訂閱事件；當(dāng)組件卸載（unmounted）的時候，在 componentWillUnmount 事件中取消事件的訂閱。

看了上面所述,是否有所感悟
例如通過事件來進(jìn)行非父子組件間的通信，如果操作不是很多，我們可以自己動手簡單實現(xiàn)以下哦！
下面我簡單的寫了一個,請看

簡單實現(xiàn)了一下 subscribe 和 dispatch

let EventEmitter = {
  _events: {},
  dispatch: function (event, data) {
    if (!this._events[event]) { // 沒有監(jiān)聽事件
      return;
    }
    for (var i = 0; i < this._events[event].length; i++) {
      this._events[event][i](data);
    }
  },
  subscribe: function (event, callback) {
    // 創(chuàng)建一個新事件數(shù)組
    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" });

是不是現(xiàn)在覺得組件通信其實也沒那么難懂吧,加油吧，騷年

云服務(wù)器 GPU云服務(wù)器組件和組件通信組件通信組件之間通信父子組件通信

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93771.html

發(fā)表評論

登陸后可評論

0條評論

zhangxiangliang

男|高級講師

我要關(guān)注我要私信

TA的文章

技術(shù)水平低，就這還敢寫自動化項目實戰(zhàn)經(jīng)驗豐富？

閱讀 652·2021-10-13 09:39
DUX主題7.4版本更新：新增文字LOGO、Ajax閱讀數(shù)、點贊狀態(tài)、后臺閱讀量排序等多項功能

閱讀 1459·2021-09-09 11:53
PC端CSS布局匯總

閱讀 2653·2019-08-29 13:55
阿里巴巴 2015 暑期實習(xí)前端筆試題

閱讀 730·2019-08-28 18:08
ES7-Decorator-裝飾者模式

閱讀 2599·2019-08-26 13:54
Notadd 后臺全平臺支持， json 生成 React 表單， typeorm 多數(shù)據(jù)庫支持

閱讀 2413·2019-08-26 11:44
JS數(shù)據(jù)類型& 判斷

閱讀 1842·2019-08-26 11:41
瀏覽器端rsa加密方案node-forge

閱讀 3792·2019-08-26 10:15

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

5.React中組件通信問題

相關(guān)文章