●目錄 前言 .................................. XIX 1 Flux是什麼 .................... 1 Flux是一套模式 ......................... 1數據入口 ............................. 1狀態管理 ............................. 2保持同步更新 ..................... 3信息架構 ............................. 4 Flux並不是一個框架 ................. 4 Flux的設計思路問題解決方案 . 5數據流向 ............................. 5可回溯性 ............................. 7通知的一致性 ..................... 8簡捷的架構分層 ................. 9低耦合渲染 ......................... 9 Flux組件 ................................... 10動作 ................................... 10分發器 ............................... 11存儲器 ............................... 12視圖 ................................... 12安裝 Flux軟件包 ...................... 14小結 ........................................... 16 2 Flux的原則 .................. 17 MV*所面臨的挑戰 ................... 17關注點分離 ....................... 18級聯更新 ........................... 19模型更新的職責 ............... 20單向數據 ................................... 21從開始到結束 ................... 22無毒無害 ........................... 23顯式優於隱式 ........................... 23暗藏隱患的更新 ............... 24集中修改狀態的地方 ....... 26太多動作？ ....................... 26分層優於嵌套 ........................... 27多組件嵌套 ....................... 27嵌套深度與副作用 ........... 28數據流和分層 ................... 28應用數據和界面狀態 ............... 29兩個相同的東西 ............... 29強耦合轉換 ....................... 30功能中心化 ....................... 31小結 ........................................... 31 3 搭建骨架架構 ............... 32總體組織 ................................... 32目錄結構 ........................... 33依賴管理 ........................... 33信息設計 ................................... 34用戶不需要了解模型 ....... 34存儲器映射用戶看到的內容 ......................................... 35和哪些東西協同工作 ....... 36在動作中注入存儲器 ............... 36獲取 API數據 ................... 36 改變 API資源狀態 ........... 42本地動作 ........................... 47存儲器和功能域 ....................... 50梳理頂層功能 ................... 50無關緊要的 API數據 ....... 51構造存儲器數據 ............... 53模擬視圖 ................................... 53找尋失去的數據 ............... 53定位動作 ........................... 54端到端場景 ............................... 56動作清單 ........................... 56存儲器清單 ....................... 56視圖清單 ........................... 57小結 ........................................... 57 4 創建動作 ...................... 58動作的名稱和常量 ................... 58動作命名約定 ................... 58靜態動作數據 ................... 59組織動作常量 ................... 62特性動作生成器 ....................... 63什麼時候需要模塊化 ....... 63模塊化架構 ....................... 64模擬數據 ................................... 65模擬已存在的接口 ........... 65模擬新接口 ....................... 66替換動作生成器 ............... 70狀態動作生成器 ....................... 71整合其他繫統 ................... 72 web socket連接 ................ 73參數化動作生成器 ................... 76刪除多餘的動作 ............... 76 保持動作的通用性 ........... 77創建衍生動作 ................... 80小結 ........................................... 81 5 異步動作 ...................... 83保持 Flux同步 .......................... 83為什麼要同步 ................... 83壓縮異步行為 ................... 84異步動作語義 ................... 85創建 API調用 ........................... 87 API是常見的情況 ............ 87 API調用和用戶交互 ........ 88結合 API調用 ........................... 92復雜的動作生成器 ........... 93組合動作生成器 ............... 96返回 promise ............................. 97不含 promise的同步 ........ 98組織異步行為 ................... 99錯誤處理 ......................... 101小結 ......................................... 103 6 改變 Flux存儲器的狀態 .............................................105適應不斷變化的信息 ............. 105變化的 API數據 ............. 105變化的功能 ..................... 106受影響的組件 ................. 107減少重復的存儲器數據 ......... 107通用存儲器數據 ............. 107注冊通用存儲器 ............. 108結合通用和專用數據 ..... 112處理存儲器的依賴關繫 ......... 116等待存儲器 ..................... 116 數據依賴 ......................... 118 UI依賴 ............................ 119視圖的更新順序 ..................... 125存儲器的注冊順序 ......... 125視圖渲染的優先級排序 . 125處理存儲器復雜度 ................. 126存儲器太多 ..................... 126反思功能域 ..................... 126小結 ......................................... 127 7 視圖信息 .....................128傳遞視圖數據 ......................... 128 change事件中的數據 ..... 128視圖決定何時渲染 ......... 132保持視圖無狀態 ..................... 135 UI狀態屬於存儲器 ........ 135不用查詢 DOM ............... 135視圖的職責 ............................. 136渲染存儲器數據 ............. 136子視圖結構 ..................... 137用戶交互 ......................... 138在 Flux中使用 ReactJS .......... 138設置視圖狀態 ................. 139組成視圖 ......................... 143響應事件 ......................... 146路由和動作 ..................... 149小結 ......................................... 154 8 信息的生命周期 ...........155組件生命周期難題 ................. 155回收不再使用的資源 ..... 156隱藏依賴 ......................... 157 內存洩漏 ......................... 157 Flux結構是靜態的 ................. 158單例模式 ......................... 158與模型進行比較 ............. 161靜態視圖 ......................... 161擴展信息 ................................. 165如何很好地擴展 ............. 165昀小化所需信息 ............. 169擴展的動作 ..................... 169閑置的存儲器 ......................... 170刪除存儲器數據 ............. 170優化閑置的存儲器 ......... 173保持存儲器數據 ............. 174小結 ......................................... 182 9 不可變的存儲器 ...........183放棄隱藏的更新 ..................... 183如何破壞 Flux架構 ........ 184獲取存儲器數據 ............. 186一切皆不可變 ................. 187強制執行單向數據流 ............. 187縱橫交錯的單向數據流 . 188過多的存儲器？ ............. 189沒有足夠的動作 ............. 189強制不可變性 ................. 190不可變數據的成本 ................. 195垃圾回收是昂貴的 ......... 196批量轉換 ......................... 196抵消成本 ......................... 197使用 Immutable.js ................... 197不可變列表和映射 ......... 198不可變的轉換 ................. 201 變化檢測 ......................... 204小結 ......................................... 208 10 實現分發器 ................209抽像分發器接口 ..................... 209存儲器的注冊地 ............. 209分發負載 ......................... 210依賴關繫的處理 ............. 211分發器所面臨的挑戰 ............. 212教育的目的 ..................... 212單例模式的分發器 ......... 212手動注冊存儲器 ............. 213容易出錯的依賴管理 ..... 213構建分發器模塊 ..................... 214封裝存儲器的引用 ......... 214處理依賴 ......................... 215分發動作 ......................... 217優化存儲器的注冊 ................. 220基礎存儲器類 ................. 221一個動作方法 ................. 222小結 ......................................... 226 11 可替代的視圖組件 .....227 ReactJS是適合 Flux的 .......... 227 ReactJS是單向的 ........... 227重新渲染數據很簡單 ..... 229短小精悍的代碼 ............. 229 ReactJS的缺點 ....................... 230虛擬 DOM和內存 .......... 230 JSX和標記語言 .............. 231庫鎖定 ............................. 232使用 jQuery和 Handlebars ..... 232 為什麼是 jQuery和 Handlebars ................................... 232渲染模板 ......................... 233組合視圖 ......................... 236事件處理 ......................... 238使用 VanillaJS ......................... 244對可選擇性保持開放 ..... 244遷移到 React ................... 244新的技術熱點 ................. 245小結 ......................................... 245 12 使用 Flux庫 ..............247實現核心 Flux組件 ................ 247自定義分發器 ................. 247實現一個基本的存儲器 . 248創建動作 ......................... 248實現中遇到的痛點 ................. 249分發異步動作 ................. 249劃分存儲器 ..................... 249使用 Alt ................................... 250核心理念 ......................... 250創建存儲器 ..................... 251聲明動作生成器 ............. 253監聽狀態變化 ................. 254視圖渲染以及分發動作 . 255使用 Redux .............................. 258核心思想 ......................... 258狀態轉換器和存儲器 ..... 259 Redux動作 ...................... 262渲染組件和分發動作 ..... 264小結 ......................................... 269 13 測試和性能 ................270你好，Jest ............................... 270測試動作生成器 ..................... 272同步函數 ......................... 273異步函數 ......................... 274測試存儲器 ............................. 277測試存儲器監聽器 ......... 277測試初始狀態 ................. 280性能目標 ................................. 283用戶感知的性能 ............. 283測量的性能 ..................... 284性能需求 ......................... 284分析工具 ................................. 285異步動作 ......................... 285存儲器內存 ..................... 285 CPU占用 ........................ 286基準測試工具 ......................... 286代碼的基準測試 ............. 286狀態轉換 ......................... 287小結 ......................................... 290 14 Flux和軟件開發的生命周期 ....................................291 Flux的開放性解釋 ................. 291實現選項一：隻是模式 . 292實現選項二：使用 Flux庫 .......................................... 292實現並使用自己的 Flux . 292開發方法論 ............................. 293在 Flux初期要考慮的事情 .......................................... 293成熟的 Flux應用 ............ 294從 Flux中獲得的啟示 ............ 294單向數據流 ..................... 295信息設計為王 ................. 295 打包 Flux組件 ........................ 295完整獨立的 Flux ............. 296可安裝的軟件包 ............. 296可安裝的 Flux組件 ........ 296小結 ......................................... 304

Flux 是一套架構模型，將Web 應用的各個主要功能以組件的形式進行劃分，並進一步劃分子組件。而各組件又以動作、存儲器和視圖來進行架構分層。整體采用單向數據流的形式進行事件的響應，各組件間也強制按照單向數據流進行相互影響，直至數據流結束。在本書中，先向大家介紹了Flux 是什麼，以及簡單展示了其基本構建模式。然後從動作、存儲器、視圖、分發器等核心概念，更為詳細地闡述了Flux的架構模式。最後，介紹了Flux 庫、測試工具和其對其他相關技術棧的影響。本書適用於前端開發者，以及希望對Flux 架構有深入了解的人群。

（加）Adam Boduch（亞當 博達哈） 著 段金辰等 譯