123,123

內(nèi)容簡(jiǎn)介

　　本書(shū)是一本React入門(mén)書(shū)，也是一本React實(shí)踐書(shū)，更是一本React企業(yè)級(jí)項(xiàng)目開(kāi)發(fā)指導(dǎo)書(shū)。全書(shū)系統(tǒng)地介紹了以React.js為中心的各種前端開(kāi)發(fā)技術(shù)，可以幫助前端開(kāi)發(fā)人員系統(tǒng)地掌握這些知識(shí)，提升自己的開(kāi)發(fā)水平。本書(shū)共9章，依次介紹了用Webpack構(gòu)建項(xiàng)目、模塊化與組件開(kāi)發(fā)、React中的事件系統(tǒng)與表單、React Redux數(shù)據(jù)流管理、react-router路由、React性能優(yōu)化原理與方法、React服務(wù)端渲染、自動(dòng)化測(cè)試工具與實(shí)戰(zhàn)，*后通過(guò)一個(gè)企業(yè)級(jí)項(xiàng)目開(kāi)發(fā)實(shí)戰(zhàn)案例，帶領(lǐng)讀者進(jìn)一步夯實(shí)并實(shí)踐React知識(shí)。本書(shū)是一本大前端學(xué)習(xí)入門(mén)與實(shí)戰(zhàn)讀物，不僅適合React開(kāi)發(fā)人員閱讀，也適合跨平臺(tái)開(kāi)發(fā)的前端人員閱讀，而且還可以作為React開(kāi)發(fā)的“字典”供開(kāi)發(fā)人員隨時(shí)翻閱。

作者簡(jiǎn)介

　　徐順發(fā)（Allan）貝貝集團(tuán)前端技術(shù)專(zhuān)家。愛(ài)折騰，熱衷于技術(shù)研究和技術(shù)分享。主攻前端架構(gòu)和各類(lèi)框架，擅長(zhǎng)React.js、Vue.js和Node.js等主流技術(shù)棧。曾經(jīng)獲得了2018年SegmentFault Hackathon區(qū)塊鏈黑客馬拉松冠軍。

圖書(shū)目錄

第1章 React入門(mén)      1
1.1 開(kāi)始學(xué)習(xí)React之前    1
1.1.1 下載與使用Node.js和NPM    1
1.1.2 模塊打包工具之Browserify    2
1.1.3 模塊打包工具之Webpack       3
1.1.4 個(gè)Webpack構(gòu)建實(shí)戰(zhàn)       6
1.1.5 Webpack loader實(shí)戰(zhàn) 7
1.1.6 Webpack配置詳解    9
1.1.7 ES 6語(yǔ)法   15
1.2 React簡(jiǎn)介     22
1.3 React的特征 23
1.3.1 組件化       23
1.3.2 虛擬DOM 24
1.3.3 單向數(shù)據(jù)流       25
1.4 JSX語(yǔ)法      25
1.4.1 JSX簡(jiǎn)介    25
1.4.2 JSX的轉(zhuǎn)譯       27
1.4.3 JSX的用法       29
1.5 Hello World實(shí)戰(zhàn)訓(xùn)練 34
1.5.1 不涉及項(xiàng)目構(gòu)建的Hello World      34
1.5.2 基于Webpack的Hello World 35
1.5.3 Hello World進(jìn)階      39
第2章 React的組件 44
2.1 組件的聲明方式   44
2.1.1 ES 5寫(xiě)法：React.createClass()       44
2.1.2 ES 6寫(xiě)法：React.Component 45
2.1.3 無(wú)狀態(tài)組件       46
2.2 組件的主要成員   47
2.2.1 狀態(tài)（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 跨級(jí)組件通信   54
2.3.4 非嵌套組件通信       56
2.4 組件的生命周期   58
2.4.1 組件的掛載       58
2.4.2 數(shù)據(jù)的更新過(guò)程       60
2.4.3 組件的卸載（unmounting）    61
2.4.4 錯(cuò)誤處理   61
2.4.5 老版React中的生命周期 62
2.4.6 生命周期整體流程總結(jié)   63
2.5 組件化實(shí)戰(zhàn)訓(xùn)練——TodoList    64
第3章 React的事件與表單      70
3.1 事件系統(tǒng)      70
3.1.1 合成事件的事件代理       70
3.1.2 事件的自動(dòng)綁定       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 受控組件和非受控組件對(duì)比   78
3.2.4 表單組件的幾個(gè)重要屬性       80
3.3 React的樣式處理 80
3.3.1 基本樣式設(shè)置   80
3.3.2 CSS Modules樣式設(shè)置    82
第4章 React Redux數(shù)據(jù)流管理     86
4.1 Flux架構(gòu)      86
4.1.1 MVC和MVVM 86
4.1.2 Flux介紹   90
4.1.3 深入Flux   91
4.1.4 Flux的缺點(diǎn)       96
4.1.5 Flux架構(gòu)小結(jié)   97
4.2 Redux狀態(tài)管理工具   97
4.2.1 Redux簡(jiǎn)介 97
4.2.2 Redux的使用場(chǎng)景    98
4.2.3 Redux的動(dòng)機(jī)    99
4.2.4 Redux三大特性 99
4.2.5 Redux的組成——拆解商城購(gòu)物車(chē)實(shí)例 100
4.2.6 Redux搭配React使用     105
4.3 middleware中間件      109
4.3.1 為何需要middleware       109
4.3.2 深入理解middleware       109
4.4 Redux實(shí)戰(zhàn)訓(xùn)練——網(wǎng)上書(shū)店   113
4.4.1 目錄結(jié)構(gòu)   113
4.4.2 應(yīng)用入口 src/index.js       114
4.4.3 Action的創(chuàng)建和觸發(fā)       116
4.4.4 Reducer的創(chuàng)建 118
4.4.5 UI展示組件的創(chuàng)建 122
4.4.6 發(fā)起一個(gè)動(dòng)作Action（添加商品到購(gòu)物車(chē)）       124
第5章路由       127
5.1 前端路由簡(jiǎn)介      127
5.2 前端路由的實(shí)現(xiàn)原理   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 默認(rèn)路由   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標(biāo)簽   135
5.5.2 history屬性       136
5.5.3 傳參   137
5.6 進(jìn)入和離開(kāi)的Hook     137
5.6.1 onEnter簡(jiǎn)介     137
5.6.2 onLeave簡(jiǎn)介     138
第6章 React的性能及性能優(yōu)化      139
6.1 diff算法       139
6.1.1 時(shí)間復(fù)雜度和空間復(fù)雜度       139
6.1.2 diff策略    141
6.1.3 key屬性     148
6.2 組件重新渲染      149
6.3 PureRender純渲染      152
6.4 Immutable持久性數(shù)據(jù)結(jié)構(gòu)庫(kù)    153
6.4.1 Immutable的作用     153
6.4.2 Immutable的優(yōu)缺點(diǎn) 155
6.4.3 Immutable和原生JavaScript對(duì)象相互轉(zhuǎn)換   156
6.4.4 Immutable中的對(duì)象比較 156
6.4.5 Immutable與React配合使用   157
第7章 React服務(wù)端渲染 159
7.1 客戶(hù)端渲染和服務(wù)端渲染的區(qū)別      159
7.2 在React中實(shí)現(xiàn)服務(wù)端渲染       160
7.2.1 為何需要服務(wù)端渲染       160
7.2.2 服務(wù)端渲染中的API       161
7.2.3 渲染方法   161
7.2.4 狀態(tài)管理   165
7.2.5 Express框架簡(jiǎn)介      166
7.2.6 路由和HTTP請(qǐng)求    169
7.3 實(shí)戰(zhàn)訓(xùn)練——服務(wù)端渲染   172
7.3.1 項(xiàng)目結(jié)構(gòu)   172
7.3.2 項(xiàng)目實(shí)現(xiàn)   172
第8章自動(dòng)化測(cè)試    178
8.1 測(cè)試的作用   178
8.2 單元測(cè)試簡(jiǎn)介      178
8.3 測(cè)試工具      180
8.3.1 常見(jiàn)的測(cè)試工具       180
8.3.2 React的測(cè)試工具     181
8.3.3 單元測(cè)試工具Jest    181
8.3.4 單元測(cè)試工具Enzyme     187
8.4 Jest和Enzyme實(shí)戰(zhàn)訓(xùn)練     189
8.4.1 Jest和Enzyme的配置     191
8.4.2 測(cè)試From組件視圖和單擊事件     193
8.4.3 測(cè)試ListItems組件視圖   196
第9章實(shí)戰(zhàn)——React Redux搭建社區(qū)項(xiàng)目 198
9.1 項(xiàng)目結(jié)構(gòu)      198
9.2 Less文件處理      198
9.3 路由和Redux配置      199
9.3.1 前期配置   199
9.3.2 路由功能的測(cè)試       201
9.4 業(yè)務(wù)入口      202
9.5 首頁(yè)      203
9.5.1 頭部   204
9.5.2 列表內(nèi)容   205
9.6 詳情頁(yè)   224
9.6.1 靜態(tài)頁(yè)面開(kāi)發(fā)   224
9.6.2 根據(jù)id獲取詳情      227
9.6.3 渲染內(nèi)容   228
9.7 個(gè)人中心      230
9.7.1 分析頁(yè)面功能   231
9.7.2 模擬用戶(hù)登錄和登出       232
9.8 實(shí)戰(zhàn)項(xiàng)目回顧      234
……