国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

5.React中組件通信問題

Taonce / 341人閱讀

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

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

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52086.html

相關文章

  • 5.React組件通信問題

    摘要:對于事件系統,這里有個基本操作步驟訂閱監聽一個事件通知,并發送觸發發布發送一個事件通知那些想要的組件。看例子吧,很好理解在處理事件的時候,需要注意在事件中,如果組件掛載完成,再訂閱事件當組件卸載的時候,在事件中取消事件的訂閱。 1.父組件傳遞值給子組件 想必這種大家都是知道的吧!都想到了用我們react中的props,那么我在這簡單的寫了小demo,請看父組件 class Parent...

    Joyven 評論0 收藏0
  • 5.React組件通信問題

    摘要:對于事件系統,這里有個基本操作步驟訂閱監聽一個事件通知,并發送觸發發布發送一個事件通知那些想要的組件??蠢影?,很好理解在處理事件的時候,需要注意在事件中,如果組件掛載完成,再訂閱事件當組件卸載的時候,在事件中取消事件的訂閱。 1.父組件傳遞值給子組件 想必這種大家都是知道的吧!都想到了用我們react中的props,那么我在這簡單的寫了小demo,請看父組件 class Parent...

    zhangxiangliang 評論0 收藏0
  • react進階漫談

    摘要:父組件向子組件之間非常常見,通過機制傳遞即可。我們應該聽說過高階函數,這種函數接受函數作為輸入,或者是輸出一個函數,比如以及等函數。在傳遞數據的時候,我們可以用進一步提高性能。 本文主要談自己在react學習的過程中總結出來的一些經驗和資源,內容邏輯參考了深入react技術棧一書以及網上的諸多資源,但也并非完全照抄,代碼基本都是自己實踐,主要為平時個人學習做一個總結和參考。 本文的關鍵...

    neuSnail 評論0 收藏0
  • react進階漫談

    摘要:父組件向子組件之間非常常見,通過機制傳遞即可。我們應該聽說過高階函數,這種函數接受函數作為輸入,或者是輸出一個函數,比如以及等函數。在傳遞數據的時候,我們可以用進一步提高性能。 本文主要談自己在react學習的過程中總結出來的一些經驗和資源,內容邏輯參考了深入react技術棧一書以及網上的諸多資源,但也并非完全照抄,代碼基本都是自己實踐,主要為平時個人學習做一個總結和參考。 本文的關鍵...

    wyk1184 評論0 收藏0
  • react進階漫談

    摘要:父組件向子組件之間非常常見,通過機制傳遞即可。我們應該聽說過高階函數,這種函數接受函數作為輸入,或者是輸出一個函數,比如以及等函數。在傳遞數據的時候,我們可以用進一步提高性能。 本文主要談自己在react學習的過程中總結出來的一些經驗和資源,內容邏輯參考了深入react技術棧一書以及網上的諸多資源,但也并非完全照抄,代碼基本都是自己實踐,主要為平時個人學習做一個總結和參考。 本文的關鍵...

    junnplus 評論0 收藏0

發表評論

0條評論

Taonce

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<