React Reflux流程高階

2021-09-19 12:29:56 字數 2111 閱讀 3264

上回說到,reflux將react之間多個元件之間的通訊問題解決了,保證了這個應用的資料統一,總結一下就是:

component是乙個介面渲染角色,會有自己的狀態,可以傳遞屬性

actions是使用者操作的介面,它並沒有controller那樣強大的控制能力,我的理解是定義了乙個操作的內部restful操作規範,每乙個涉及到資料的操作,都必須通過actions,這樣對於以後複雜的流程和資料模型,我們內部不用把介面寫得亂七八糟。

store是儲存資料的地方,也就是mvc中的modal,但是很多邏輯我們又不得不放在store裡面,所以store更像controller。store的資料一旦變化,它會通知各個監聽他的元件物件,重新對介面進行渲染。

這一章,我們還是拿useractions和userstore來舉例說明,在我們的專案中,如何更好的使用reflux。

目前我們的useractions是這樣的:

var useractions = reflux.createactions(,

'login' : ,

'loginwithtoken' : ,

'logout' : ,

'openlogin' : ,

'currentuser' : ,

'modifypassword':});

看action的命名應該就知道大概的用途了,這裡不細說。我們的userstore是這樣初始化的:

init: function() ;

/* 獲取第三方登入的返回值,並得到當前使用者

*/useractions.currentuser();

/* 可以用下面**代替

listenables: useractions,

*/this.listento(useractions.login.success, this.onloginsuccess);

this.listento(useractions.login.failed, this.onloginfailed);

this.listento(useractions.register.success, this.onregistersuccess);

this.listento(useractions.register.failed, this.onregiste***iled);

....},

我們定義了乙個userdata物件,會儲存當前的使用者資訊,如果沒有登入狀態,islogin是false。請注意,我們在userstore裡面會初始化呼叫乙個useractions.currentuser().也就是說在頁面一載入的時候,我們就會呼叫獲取當前使用者的登入資訊。

得到使用者資訊的反饋之後:

ongetcurrentuser : function(data)else},

很容易明白上面的**,如果後端返回成功,設定當前使用者,如果後端失敗,嘗試用本地的logintoken登入。但是注意到了沒有,為什麼會有乙個flag呢?當然你可能根本沒有注意到。。。。

flag是我自己定義的乙個標記,並不是reflux的定義,為什麼要定義?回頭看看useractions的**,發現那麼多的actions都是呼叫同乙個userstore,使用者登入、註冊、三方登入、修改密碼等等。監聽userstore的元件相當多,一般涉及到需要當前使用者登入才能操作的介面基本上都要監聽userstore,如果不管進行什麼操作,這些元件都要聽到userstore資料變化的訊息,那不就煩(luan)死(tao)啦。所以,我們針對每乙個不同的actions操作返回的結果定義乙個flag,在不同的元件監聽方法裡面判斷這次資料的變化是不是我想要聽到的,如果不是就不管他。

於是component裡面的**就是這樣的:

handleloginresult : function(data)else

}},當然,對於userstore裡面的資訊是非常重要的,所以對於它而言,一般需要登入才能操作的介面,我們直接不判斷他是從哪登入的,只要登入就行,就不用判斷flag。比如攝影師的編輯頁面是這樣的監聽方法:

handleuserstorechange : function(userdata)else

}else},

對於程式設計師而言,**是最能說明事情的方法,所以大量的引用了**,對於你們的困擾,我說聲抱歉。當然,如果你能仔細看懂上面的例子,目前對於我們的專案而言,處理各種型別的邏輯應該是不成話下了。

react 高階元件學習流程

定義高階元件是乙個函式,引數為元件,返回值為新元件的函式 作用 1 提高元件復用率 2 可檢測性 3 保證元件功能的單一性 第一步 建立乙個函式,函式內return值為乙個新元件 接受的function作為引數本身帶有props,因此需要雙箭頭 const foo cmp props 第二步 建立乙...

T SQL查詢高階 流程控制語句

概述 和其他高階語言一樣,t sql中也有用於控制流程的語句。t sql中的流程控制語句進一步擴充套件了t sql的力量 使得大部分業務邏輯可以在資料庫層面進行。但很多人對t sql中的流程控制語句並沒有系統的了解,本篇文章會系統的對t sql語句中的流程控制語句進行系統講解。基本概念 在沒有流程控...

T SQL查詢高階 流程控制語句

和其他高階語言一樣,t sql中也有用於控制流程的語句。t sql中的流程控制語句進一步擴充套件了t sql的力量 使得大部分業務邏輯可以在資料庫層面進行。但很多人對t sql中的流程控制語句並沒有系統的了解,本篇文章會系統的對t sql語句中的流程控制語句進行系統講解。基本概念 在沒有流程控制語句...