react中元件之間的資料傳送,交流,最簡單,通用,好用的方法.

Day____Day____Up發表於2018-04-05
React元件

該方法最大的方便就是:   模組a 發生一個事件 ,之後可以主動 觸發模組b中事件改變模組b的state和props等,簡直不要太方便.

如果你在糾結react模組之間怎麼實現傳值的話,不用再找其他了,就是這個方法了親測好用,很通用.

很詳細用法見http://taobaofed.org/blog/2016/11/17/react-components-communication/  中 兄弟元件間通訊 部分

以下是經本人理解後的核心部分,方便上手。(簡單demo如下)

模組 a 中寫 var data  = "hello,money"; eventProxy.trigger（"test", data）；

模組 b 中寫 eventProxy.on（"test", (data)=>{ console.log(data) }）；

只要模組a中的語句每次被觸發執行時後都會觸發模組b中語句列印出傳遞過來的data值.

  • on、one：on 與 one 函式用於訂閱者監聽相應的事件，並將事件響應時的函式作為引數，on 與 one 的唯一區別就是，使用 one 進行訂閱的函式，只會觸發一次，而 使用 on 進行訂閱的函式，每次事件發生相應時都會被觸發。
  • trigger：trigger 用於釋出者釋出事件，將除第一引數（事件名）的其他引數，作為新的引數，觸發使用 one 與 on 進行訂閱的函式。
  • off：用於解除所有訂閱了某個事件的所有函式。

---------下面的程式碼可以單獨放在一個檔案中,用script引入,或important入即可使用eventProxy--------------

 
// eventProxy.js
'use strict';
const eventProxy = {
  onObj: {},
  oneObj: {},
  on: function(key, fn) {
    if(this.onObj[key] === undefined) {
      this.onObj[key] = [];
    }

    this.onObj[key].push(fn);
  },
  one: function(key, fn) {
    if(this.oneObj[key] === undefined) {
      this.oneObj[key] = [];
    }

    this.oneObj[key].push(fn);
  },
  off: function(key) {
    this.onObj[key] = [];
    this.oneObj[key] = [];
  },
  trigger: function() {
    let key, args;
    if(arguments.length == 0) {
      return false;
    }
    key = arguments[0];
    args = [].concat(Array.prototype.slice.call(arguments, 1));

    if(this.onObj[key] !== undefined
      && this.onObj[key].length > 0) {
      for(let i in this.onObj[key]) {
        this.onObj[key][i].apply(null, args);
      }
    }
    if(this.oneObj[key] !== undefined
      && this.oneObj[key].length > 0) {
      for(let i in this.oneObj[key]) {
        this.oneObj[key][i].apply(null, args);
        this.oneObj[key][i] = undefined;
      }
      this.oneObj[key] = [];
    }
  }
};


參見:http://taobaofed.org/blog/2016/11/17/react-components-communication/



相關文章