《React+Redux前端開發實戰》
React+Redux前端開發實戰
徐順發? 編著
前言
隨著智能手機和移動互聯網的普及，前端技術棧從jQuery到Backbone和Knockout，再到Angular、React和Vue，各大框架此起彼伏。如今，前端開發越來越龐大的應用規模和越來越復雜的交互效果遠不是早期前端開發者們所能想象的。基于原生JavaScript來構建這些應用顯得異常復雜且難以維護。但擁有創造力的開發者們并沒有停下腳步，而是不斷地尋求新的解決方案。其中，React逐漸成為各種方案中最耀眼的一門技術，它是眾多開發者的智慧結晶。
React誕生于Facebook，開源之后立即在前端領域掀起了一股巨浪，得到了眾多開發者的青睞。隨后，React社區也是蓬勃發展，出現了大量優秀的前端開發工具，為開發者提供了一種不一樣的開發體驗，也為大家指明了一條充滿想象的道路。
《海賊王》中羅杰說，每個人都有自己出場的機會！未來，也許React會在前端的歷史浪潮中被人們遺忘，但如今React的設計思想卻影響了無數的開發者，當下正是屬于它的時代。
本書編寫目的
其次，也希望讀者認識到，React的設計思想給前端開發帶來了非常積極的作用和很大的影響。因此，希望讀者能通過閱讀本書辯證地看待和思考各類前端組件與框架工具，并提升自己的認知，開闊自己的眼界，這是寫作本書的另一個目的。
本書有何特色
1．提供翔實的代碼及解讀
為了便于讀者理解本書內容，提高學習效率，書中的所有實例和項目案例都提供了翔實的源代碼，并對源代碼做了詳細的解讀。讀者可以通過本書提供的-獲取。
2．不僅僅是React.js
本書雖然定位為React的入門與實踐讀物，但是其內容遠遠不只是React.js，書中還介紹了當前前端開發所使用的一整套主流技術棧，如ES 6、Webpack、單元測試和Node.js等。
3．有廣度，也有深度
從前端到服務器端，從各類知識點的通俗講解到相關知識點的深入解讀，本書不僅有廣度，而且還有深度，能夠讓讀者徹底了解React+Redux知識點的前世今生。
本書內容概要
第1章從學習React需要準備的知識和基本概念開始入手，依次介紹了Node.js、NPM、Webpack、ES 6語法、React核心特性和JSX語法等內容。
第2章介紹了React組件的相關知識，不僅可以讓讀者理解組件化開發的概念，還能動手實踐各種React中的組件，并掌握組件之間的通信。
第3章介紹了React的事件、表單和樣式等相關知識點，讓讀者了解如何通過React創建豐富的用戶體驗。
第4章介紹了React+Redux的數據流管理。雖然本章的主題是介紹React生態中的數據管理工具Redux，但為了讓讀者了解React+Redux的項目原理，還剖析了目前比較常用的MVC和MVVM等開發模式的架構思想和設計模式理念。
第5章介紹了React的路由功能，幫助讀者了解客戶端路由的原理，進而使用React中的路由工具react-router實現前端路由。
第6章介紹了React性能及性能優化的相關知識。首先分析了神秘的diff算法，然后介紹了組件渲染和數據結構的底層技術，最后帶領讀者學習如何開發高性能的React應用。
第7章主要介紹了React服務端渲染（SSR）的相關技術。首先介紹了服務端渲染和客戶端渲染的區別，然后介紹了React中服務端渲染的方法，最后通過實例演示了服務端渲染的流程。
第8章介紹了單元測試及單元測試對前端的重要性，并結合React實戰項目案例，讓讀者了解如何使用各種工具實現自動化測試。
第9章通過一個移動端社區項目案例，對React、Redux、react-router和Webpack等內容進行總結，并帶領讀者動手開發實踐。
本書所有實戰項目案例的源代碼文件都存放在GitHub上，其他可運行的小案例源代碼文件都存放在JSFiddle上（有搭建好的環境），讀者可以自行下載。
另外，讀者還可以在華章公司的網站（www.hzbook.com）上搜索到本書，然后通過頁面上的“配書資源”下載鏈接獲取源代碼文件。
本書為誰而寫
如果您熟悉JavaScript，打算開發跨平臺應用程序，且想選擇React技術棧，那么本書就是為您而準備的。本書讀者對象如下：
學習大前端開發的入門與提高人員；
React開發程序員；
跨平臺開發前端人員；
React全棧開發人員；
相關院校的學生；
培訓機構的學員。
致謝
讀者在閱讀本書的過程中若有問題，可以發送電子郵件到hzbook2017@163.com以獲取幫助。
目錄
前言
第1章? React入門???? 1
1.1? 開始學習React之前??? 1
1.1.1? 下載與使用Node.js和NPM??? 1
1.1.2? 模塊打包工具之Browserify???? 2
1.1.3? 模塊打包工具之Webpack????? 3
1.1.4? 第一個Webpack構建實戰????? 6
1.1.5? Webpack loader實戰????? 7
1.1.6? Webpack配置詳解?? 9
1.1.7? ES 6語法??? 15
1.2? React簡介??? 22
1.3? React的特征 23
1.3.1? 組件化?????? 23
1.3.2? 虛擬DOM? 24
1.3.3? 單向數據流?????? 25
1.4? JSX語法 25
1.4.1? JSX簡介???? 25
1.4.2? JSX的轉譯 27
1.4.3? JSX的用法 29
1.5? Hello World實戰訓練 34
1.5.1? 不涉及項目構建的Hello World????? 34
1.5.2? 基于Webpack的Hello World 35
1.5.3? Hello World進階????? 39
第2章? React的組件? 44
2.1? 組件的聲明方式?? 44
2.1.1? ES 5寫法：React.createClass()??????? 44
2.1.2? ES 6寫法：React.Component 45
2.1.3? 無狀態組件?????? 46
2.2? 組件的主要成員?? 47
2.2.1? 狀態（state）??? 47
2.2.2? 屬性（props）? 49
2.2.3? render()方法????? 49
2.3? 組件之間的通信?? 52
2.3.1? 父組件向子組件通信?????? 52
2.3.2? 子組件向父組件通信?????? 53
2.3.3? 跨級組件通信??? 54
2.3.4? 非嵌套組件通信?????? 56
2.4? 組件的生命周期?? 58
2.4.1? 組件的掛載?????? 58
2.4.2? 數據的更新過程?????? 60
2.4.3? 組件的卸載（unmounting）? 61
2.4.4? 錯誤處理??? 61
2.4.5? 老版React中的生命周期 62
2.4.6? 生命周期整體流程總結??? 63
2.5? 組件化實戰訓練——TodoList??? 64
第3章? React的事件與表單???? 70
3.1? 事件系統????? 70
3.1.1? 合成事件的事件代理?????? 70
3.1.2? 事件的自動綁定?????? 71
3.1.3? 在React中使用原生事件 73
3.1.4? 合成事件與原生事件混用?????? 73
3.2? 表單（Forms）??? 75
3.2.1? 受控組件??? 75
3.2.2? 非受控組件?????? 77
3.2.3? 受控組件和非受控組件對比??? 78
3.2.4? 表單組件的幾個重要屬性?????? 80
3.3? React的樣式處理 80
3.3.1? 基本樣式設置??? 80
3.3.2? CSS Modules樣式設置??? 82
第4章? React+Redux數據流管理??? 86
4.1? Flux架構????? 86
4.1.1? MVC和MVVM? 86
4.1.2? Flux介紹??? 90
4.1.3? 深入Flux??? 91
4.1.4? Flux的缺點 96
4.1.5? Flux架構小結??? 97
4.2? Redux狀態管理工具?? 97
4.2.1? Redux簡介 97
4.2.2? Redux的使用場景??? 98
4.2.3? Redux的動機??? 99
4.2.4? Redux三大特性 99
4.2.5? Redux的組成——拆解商城購物車實例 100
4.2.6? Redux搭配React使用???? 105
4.3? middleware中間件???? 109
4.3.1? 為何需要middleware????? 109
4.3.2? 深入理解middleware????? 109
4.4? Redux實戰訓練——網上書店?? 113
4.4.1? 目錄結構??? 113
4.4.2? 應用入口 src/index.js????? 114
4.4.3? Action的創建和觸發?????? 116
4.4.4? Reducer的創建 118
4.4.5? UI展示組件的創建?? 122
4.4.6? 發起一個動作Action（添加商品到購物車）?????? 124
第5章? 路由?????? 127
5.1? 前端路由簡介????? 127
5.2? 前端路由的實現原理?? 127
5.2.1? history API方式 128
5.2.2? Hash方式? 129
5.3? react-router路由配置 130
5.3.1? react-router的安裝? 131
5.3.2? 路由配置??? 131
5.3.3? 默認路由??? 132
5.3.4? 路由嵌套??? 133
5.3.5? 重定向?????? 133
5.4? react-router下的history??? 134
5.4.1? browserHistory模式 134
5.4.2? hashHistory模式????? 135
5.4.3? createMemoryHistory模式???? 135
5.5? react-router路由切換 135
5.5.1? Link標簽??? 135
5.5.2? history屬性?????? 136
5.5.3? 傳參??? 137
5.6? 進入和離開的Hook??? 137
5.6.1? onEnter簡介???? 137
5.6.2? onLeave簡介??? 138
第6章? React的性能及性能優化???? 139
6.1? diff算法 139
6.1.1? 時間復雜度和空間復雜度?????? 139
6.1.2? diff策略???? 141
6.1.3? key屬性???? 148
6.2? 組件重新渲染????? 149
6.3? PureRender純渲染???? 152
6.4? Immutable持久性數據結構庫?? 153
6.4.1? Immutable的作用??? 153
6.4.2? Immutable的優缺點 155
6.4.3? Immutable和原生JavaScript對象相互轉換? 156
6.4.4? Immutable中的對象比較 156
6.4.5? Immutable與React配合使用? 157
第7章? React服務端渲染? 159
7.1? 客戶端渲染和服務端渲染的區別????? 159
7.2? 在React中實現服務端渲染?????? 160
7.2.1? 為何需要服務端渲染?????? 160
7.2.2? 服務端渲染中的API 161
7.2.3? 渲染方法??? 161
7.2.4? 狀態管理??? 165
7.2.5? Express框架簡介????? 166
7.2.6? 路由和HTTP請求???? 169
7.3? 實戰訓練——服務端渲染?? 172
7.3.1? 項目結構??? 172
7.3.2? 項目實現??? 172
第8章? 自動化測試??? 178
8.1? 測試的作用?? 178
8.2? 單元測試簡介????? 178
8.3? 測試工具????? 180
8.3.1? 常見的測試工具?????? 180
8.3.2? React的測試工具???? 181
8.3.3? 單元測試工具Jest??? 181
8.3.4? 單元測試工具Enzyme???? 187
8.4? Jest和Enzyme實戰訓練??? 189
8.4.1? Jest和Enzyme的配置???? 191
8.4.2? 測試From組件視圖和單擊事件???? 193
8.4.3? 測試ListItems組件視圖?? 196
第9章? 實戰——React+Redux搭建社區項目 198
9.1? 項目結構????? 198
9.2? Less文件處理????? 198
9.3? 路由和Redux配置????? 199
9.3.1? 前期配置??? 199
9.3.2? 路由功能的測試?????? 201
9.4? 業務入口????? 202
9.5? 首頁????? 203
9.5.1? 頭部??? 204
9.5.2? 列表內容??? 205
9.6? 詳情頁?? 224
9.6.1? 靜態頁面開發??? 224
9.6.2? 根據id獲取詳情????? 227
9.6.3? 渲染內容??? 228
9.7? 個人中心????? 230
9.7.1? 分析頁面功能??? 231
9.7.2? 模擬用戶登錄和登出?????? 232
9.8? 實戰項目回顧????? 234
Redux React web前端
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。