React.js 筆記 - Flux 的個人理解

banner

React.jsFlux 的部份我看了好久還是不太能理解他的意思,這幾天總算理出點頭緒(雖然不知道對不對…),在這邊做一點紀錄。

簡單介紹

Flux 算是一套前端的處理流程,一般的講法就是前端版的 MVC,主要分四大部份:

  • Action: 事件觸發或是跟後端溝通後,發送資料給 Dispatcher。
  • Dispatcher: 根據資料內容,分派至對應的函式做處理(通常是參照資料裡面的一個 type 屬性)。
  • Store: 儲存負責處理資料的函式,向 Dispatcher 註冊後,再由 Dispatcher 負責分發。
  • View: 接收處理後的結果並更新頁面。

這邊所指的資料在 React.js 裡叫作 state,當 state 更新之後 View 就會對頁面做相對應的更新。

用 jQuery 當範例

以點擊按鈕就新增一張卡片為例,一開始用 jQuery 寫時,大概會像下面這樣子:

1
2
3
4
5
6
7
$('#addCard').click(function() {
//- 新增數據
/* do something */

//- 生成 html 並放進網頁裡
/* do something */
});