目錄
- 參考文檔
- what is iflux ?
- react.js + immutable.js
- React的界面刷新
- Immutable的特點
- flux簡介
- iflux特性及demo
參考文檔
本人純前端小白，學(xué)習(xí)兩周基本知識后遇到了一個全新的框架----iflux侨舆，寫此博客整理和記錄學(xué)習(xí)內(nèi)容酷麦。先將參考文檔列出來强胰，方便大（自）家（己）的翻閱攀操。
- iflux 官方介紹
- React 簡單介紹 --- React 入門實例教程 --- React：組件的生命周期
- Immutable 詳解
- Flux 架構(gòu)入門教程
- 《ECMAScript 6 入門》(選)
- React Router 使用教程 (選)
what is iflux ?
什么是iflux呢庶灿？其實我也不知道梗摇，項目上要用而已（逃~~~）鹊漠。首先毁兆，我們先看iflux在npm上的 官方文檔 浙滤。
what is iflux ?
iflux = immutable.js + react.js
這個式子不懂沒關(guān)系。繼續(xù)往下翻文檔气堕，找到了這么一句話：
xxxxxxxx
xxxxxxxx
于是纺腊，順其自然的寫了iflux去更好的粘合React和immutable。
看到這里茎芭，思路就很清晰了：想學(xué)iflux揖膜，得先去學(xué)React和immutable。
react.js + immutable.js
-
React主要原理
React 是一個用于構(gòu)建用戶界面的 js 庫梅桩，最大的特點就是使用virtual DOM來對頁面進行描述壹粟。第一次看代碼時找了很久都沒找到HTML文件在哪，請教后才發(fā)現(xiàn)所有的標(biāo)簽都在React組件的render方法中宿百。當(dāng)React組件的參數(shù)（props）和狀態(tài)（state）發(fā)生改變時趁仙，就會觸發(fā)其生命周期，render方法中的虛擬DOM就會對界面進行刷新垦页。頁面刷新的效率非常高雀费。
總體流程就是這樣了。組件化也是React的特征之一外臂，render方法是React組件的重要生命周期坐儿。當(dāng)用戶對界面進行操作時，只要修改props和state屬性的值宋光，就能快速的對用戶操作進行反饋貌矿。但是，React畢竟只是管理界面的工具罪佳，對props和state的數(shù)據(jù)不能進行充分的管理逛漫，這時就要用到專門處理數(shù)據(jù)的Immutable。
-
Immutable的特點
Immutable的出現(xiàn)赘艳，解決了JS中的一個痛點：JS中的對象是引用賦值酌毡，新的對象簡單的引用了原始對象克握，兩個對象指向同一個地址，共享一個內(nèi)存空間枷踏。這樣就會使得原始對象中的數(shù)據(jù)變得不可靠菩暗。
程序猿們?yōu)榱私鉀Q這個問題發(fā)明了“淺拷貝”與“深拷貝”，其實就是把原對象的數(shù)據(jù)拷貝一份放在新的對象中旭蠕。這樣做顯得很笨重停团，而且浪費內(nèi)存空間。
immutable給出的解決方法就是對原數(shù)據(jù)對象新建一個代理對象掏熬。當(dāng)數(shù)據(jù)發(fā)生變動時佑稠，新生成變動數(shù)據(jù)的備份，與其他不變的數(shù)據(jù)一起返回給新的變量旗芬。雖然兩者共享了數(shù)據(jù)舌胶，但是變量是指向兩個不同的地址的。這樣就能既完成值傳遞疮丛，又能節(jié)省內(nèi)存了幔嫂。
當(dāng)然immutable也有其他的優(yōu)點，但其處理數(shù)據(jù)對象的高效完美的與React的參數(shù)數(shù)據(jù)契合这刷，使用immutable來管理React的狀態(tài)(state)就變得理所當(dāng)然了婉烟。
flux簡介
介紹完React和Immutable，界面和數(shù)據(jù)都能進行處理了暇屋，那我們完全可以將所有的數(shù)據(jù)都作為React組件的state屬性似袁，當(dāng)任意數(shù)據(jù)發(fā)生改變即狀態(tài)(state)發(fā)生改變，就立即會刷新界面咐刨。flux便是在此設(shè)想上進行了完善形成的昙衅。
Flux將一個應(yīng)用分成四個部分：
- View： 視圖層
- Action（動作）：視圖層發(fā)出的消息（比如mouseClick）
- Dispatcher（派發(fā)器）：用來接收Actions、執(zhí)行回調(diào)函數(shù)
- Store（數(shù)據(jù)層）：用來存放應(yīng)用的狀態(tài)定鸟，一旦發(fā)生變動而涉，就提醒Views要更新頁面
圖為flux的運轉(zhuǎn)流程，在我們設(shè)想的基礎(chǔ)上联予，完成了數(shù)據(jù)的"單向流動"啼县，數(shù)據(jù)變得可控是flux的優(yōu)點之一。Flux 架構(gòu)入門教程中介紹了Action和Dispatcher沸久，完全可以跳過不看季眷，我看了也只得出一個結(jié)論：太繁雜了！這就給flux提供了改良的空間卷胯，也是iflux出現(xiàn)的重要原因子刮。
iflux簡介
此時我們再打開 iflux 官方介紹 看一看iflux的流程圖。
+-----------------------+
| WebApi |
+-----------------------+
|
\|/
+-----------------------+
| Store（immutable） |<-----+
+-----------------------+ |
| //es5 style |
| StoreMixin | msg(EventEmitter)
\|/ |
+------------------------+ |
| React App |-----|
+------------------------+
| <Layout> |
| <SearchForm/> |
| <Toolbar/> |
| <DataGrid/> |
| </Layout> |
+------------------------+
iflux針對flux的Action和Dispatcher的分層窑睁，提出了一個解決方案：一個應(yīng)用只有一個Store挺峡，單根數(shù)據(jù)源葵孤。這樣就完全不需要Action和Dispatcher了，使得框架更加的扁平化橱赠。文檔中作者的思路說的很清楚尤仍。
整體思路：
- React只承擔(dān)view應(yīng)該承擔(dān)的事情（1. 資料呈現(xiàn) 2. 用戶交互） 不處理任何的業(yè)務(wù)邏輯，就是根據(jù)數(shù)據(jù)去渲染dom即可狭姨，這樣view可以做的很輕吓著。
- 應(yīng)用的全部數(shù)據(jù)沉淀在一個Store中，當(dāng)全部數(shù)據(jù)在頂層時送挑，很多事情都變得簡單，因為獲取數(shù)據(jù)變得十分廉價暖眼。無論是校驗和對數(shù)據(jù)的轉(zhuǎn)換控制都變得非常簡單惕耕。
- React只是取數(shù)據(jù)渲染，其他的比如狀態(tài)的變化全部通過事件pubsub通知appstore去更新數(shù)據(jù)诫肠。如果狀態(tài)不會影響其他組件的級聯(lián)變化可以放在組件內(nèi)部消化掉司澎。
- 所有的ajax封裝在webapi模塊中，全部promise化栋豫〖钒玻回調(diào)回來通過cursor更新store, cursor更新store， store通知React去rerender丧鸯。
- 區(qū)分View component 和 pure component蛤铜。
