深入react技術(shù)棧pdf 陳屹高清掃描版

React就目前前端工程化最前沿的技術(shù)，如何才能更好的學(xué)習(xí)React呢？小編這里推薦用戶閱讀深入React技術(shù)棧，這是一本全面深入講述React技術(shù)棧的原創(chuàng)圖書，由阿里巴巴前端架構(gòu)師陳屹編著。本書深入全面的講述了React技術(shù)棧的發(fā)展歷程和使用方法，知識(shí)點(diǎn)全面覆蓋了React、Flux、Redux及可視化等內(nèi)容，能夠有效的幫助開發(fā)者在實(shí)踐中深入理解技術(shù)和源碼。此外，本書非常重視實(shí)戰(zhàn)，每一節(jié)都有實(shí)際的便例子，細(xì)節(jié)豐富，非常適合有一定經(jīng)驗(yàn)的前端開發(fā)人員閱讀。

全書簡(jiǎn)介

《深入react技術(shù)?！窂膸讉€(gè)維度介紹了 React。一是作為 View 庫(kù)，它怎么實(shí)現(xiàn)組件化，以及它背后的實(shí)現(xiàn)原理。二是擴(kuò)展到 Flux 應(yīng)用架構(gòu)及重要的衍生品 Redux，它們?cè)趺磁c React 結(jié)合做應(yīng)用開發(fā)。三是對(duì)它與 server 的碰撞產(chǎn)生的一些思考。四是講述它在可視化方面有著怎樣的優(yōu)勢(shì)與劣勢(shì)。

下面是各章的詳細(xì)介紹。

第 1 章：這一章從 React 最基本的概念與 API 講起，讓讀者熟悉 React 的編碼過程。

第 2 章：這一章更深入到 React 的方方面面，并從一個(gè)具體實(shí)例的實(shí)現(xiàn)到自動(dòng)化測(cè)試過程來

講述 React 組件化的過程和思路。

第 3 章：這一章深入到 React 源碼，介紹了 React 背后的實(shí)現(xiàn)原理，包括 Virtual DOM、 diff

算法到生命周期的管理，以及 setState 機(jī)制。

第 4 章：這一章介紹了 React 官方應(yīng)用架構(gòu)組合 Flux，從講解 Flux 的基本概念及其與 MV架構(gòu)的不同開始，解讀 Flux 的核心思想。

第 5 章：這一章介紹了業(yè)界炙手可熱的應(yīng)用架構(gòu) Redux，從構(gòu)建一個(gè) SPA 應(yīng)用講到背后的實(shí)現(xiàn)邏輯，并擴(kuò)展了 Redux 生態(tài)圈中常用的 middleware 和 utils 方法。

第 6 章：這一章講述 Redux 高階運(yùn)用，包括高階 reducer、它在表單中的運(yùn)用以及性能優(yōu)化的方法。另外，從源碼的角度解讀了 Redux。

第 7 章：這一章介紹了 React 在服務(wù)端渲染的方法，并從一個(gè)實(shí)例出發(fā)結(jié)合 Koa 完整地講述了同構(gòu)的實(shí)現(xiàn)。

第 8 章：這一章探索了實(shí)現(xiàn)可視化圖形圖表的方法，以及如何通過這些方法和 React 結(jié)合在一起運(yùn)轉(zhuǎn)。

附錄 A 探討了 React 開發(fā)環(huán)境的基本組成部分以及常規(guī)的安裝方法。

附錄 B 探討了團(tuán)隊(duì)實(shí)踐或多人協(xié)作過程中需要關(guān)注的編碼規(guī)范問題。

附錄 C 探討了 Koa middleware 的相關(guān)知識(shí)，幫助理解 Redux middleware。

深入react技術(shù)棧章節(jié)目錄

第1章 初入 React 世界 1

1．1 React 簡(jiǎn)介 1

1．1．1 專注視圖層 1

1．1．2 Virtual DOM 1

1．1．3 函數(shù)式編程 2

1．2 JSX 語(yǔ)法 3

1．2．1 JSX 的由來 3

1．2．2 JSX 基本語(yǔ)法 7

1．3 React 組件 11

1．3．1 組件的演變 11

1．3．2 React 組件的構(gòu)建 18

1．4 React 數(shù)據(jù)流 21

1．4．1 state 21

1．4．2 props 23

1．5 React 生命周期 29

1．5．1 掛載或卸載過程 29

1．5．2 數(shù)據(jù)更新過程 30

1．5．3 整體流程 33

1．6 React 與 DOM 34

1．6．1 ReactDOM 35

1．6．2 ReactDOM 的不穩(wěn)定方法 36

1．6．3 refs 38

1．6．4 React 之外的 DOM 操作 40

1．7 組件化實(shí)例：Tabs 組件 41

1．8 小結(jié) 47

第2章 漫淡 React 48

2．1 事件系統(tǒng) 48

2．1．1 合成事件的綁定方式 48

2．1．2 合成事件的實(shí)現(xiàn)機(jī)制 49

2．1．3 在React中使用原生事件 51

2．1．4 合成事件與原生事件混用 51

2．1．5 對(duì)比React合成事件與JavaScript原生事件 54

2．2 表單 55

2．2．1 應(yīng)用表單組件 55

2．2．2 受控組件 60

2．2．3 非受控組件 61

2．2．4 對(duì)比受控組件和非受控組件 62

2．2．5 表單組件的幾個(gè)重要屬性 63

2．3 樣式處理 64

2．3．1 基本樣式設(shè)置 64

2．3．2 CSS Modules 66

2．4 組件間通信 74

2．4．1 父組件向子組件通信 74

2．4．2 子組件向父組件通信 75

2．4．3 跨級(jí)組件通信 77

2．4．4 沒有嵌套關(guān)系的組件通信 79

2．5 組件間抽象 81

2．5．1 mixin 81

2．5．2 高階組件 86

2．5．3 組合式組件開發(fā)實(shí)踐 93

2．6 組件性能優(yōu)化 97

2．6．1 純函數(shù) 97

2．6．2 PureRender 100

2．6．3 Immutable 103

2．6．4 key 109

2．6．5 react-addons-perf 110

2．7 動(dòng)畫 111

2．7．1 CSS 動(dòng)畫與 JavaScript 動(dòng)畫 111

2．7．2 玩轉(zhuǎn) React Transition 113

2．7．3 緩動(dòng)函數(shù) 116

2．8 自動(dòng)化測(cè)試 121

2．8．1 Jest 121

2．8．2 Enzyme 124

2．8．3 自動(dòng)化測(cè)試 125

2．9 組件化實(shí)例：優(yōu)化 Tabs 組件 125

2．10 小結(jié) 133

第3章 解讀 React 源碼 134

3．1 初探 React 源碼 134

3．2 Virtual DOM 模型 137

3．2．1 創(chuàng)建 React 元素 138

3．2．2 初始化組件入口 140

3．2．3 文本組件 141

3．2．4 DOM 標(biāo)簽組件 144

3．2．5 自定義組件 150

3．3 生命周期的管理藝術(shù) 151

3．3．1 初探 React 生命周期 152

3．3．2 詳解 React 生命周期 152

3．3．3 無狀態(tài)組件 163

3．4 解密setState機(jī)制 164

3．4．1 setState異步更新 164

3．4．2 setState 循環(huán)調(diào)用風(fēng)險(xiǎn) 165

3．4．3 setState調(diào)用棧 166

3．4．4 初識(shí)事務(wù) 168

3．4．5 解密setState 170

3．5 diff 算法 172

3．5．1 傳統(tǒng) diff 算法 172

3．5．2 詳解 diff 172

3．6 React Patch 方法 181

3．7 小結(jié) 183

第4章 認(rèn)識(shí) Flux 架構(gòu)模式 184

4．1 React 獨(dú)立架構(gòu) 184

4．2 MV* 與 Flux 190

4．2．1 MVC/MVVM 190

4．2．2 Flux 的解決方案 193

4．3 Flux 基本概念 194

4．4 Flux 應(yīng)用實(shí)例 198

4．4．1 初始化目錄結(jié)構(gòu) 198

4．4．2 設(shè)計(jì) store 198

4．4．3 設(shè)計(jì) actionCreator 200

4．4．4 構(gòu)建 controller-view 202

4．4．5 重構(gòu) view 203

4．4．6 添加單元測(cè)試 205

4．5 解讀 Flux 206

4．5．1 Flux 核心思想 206

4．5．2 Flux 的不足 207

4．6 小結(jié) 207

第5章 深入 Redux 應(yīng)用架構(gòu) 208

5．1 Redux 簡(jiǎn)介 208

5．1．1 Redux 是什么 208

5．1．2 Redux 三大原則 209

5．1．3 Redux 核心 API 210

5．1．4 與 React 綁定 211

5．1．5 增強(qiáng) Flux 的功能 212

5．2 Redux middleware 212

5．2．1 middleware 的由來 212

5．2．2 理解 middleware 機(jī)制 213

5．3 Redux 異步流 217

5．3．1 使用 middleware 簡(jiǎn)化異步

請(qǐng)求 217

5．3．2 使用 middleware 處理復(fù)雜

異步流 221

5．4 Redux 與路由 224

5．4．1 React Router 225

5．4．2 React Router Redux 227

5．5 Redux 與組件 229

5．5．1 容器型組件 229

5．5．2 展示型組件 229

5．5．3 Redux 中的組件 230

5．6 Redux 應(yīng)用實(shí)例 231

5．6．1 初始化 Redux 項(xiàng)目 231

5．6．2 劃分目錄結(jié)構(gòu) 232

5．6．3 設(shè)計(jì)路由 234

5．6．4 讓應(yīng)用跑起來 235

5．6．5 優(yōu)化構(gòu)建腳本 239

5．6．6 添加布局文件 239

5．6．7 準(zhǔn)備首頁(yè)的數(shù)據(jù) 242

5．6．8 連接 Redux 245

5．6．9 引入 Redux Devtools 250

5．6．10 利用 middleware 實(shí)現(xiàn) Ajax 

請(qǐng)求發(fā)送 251

5．6．11 請(qǐng)求本地的數(shù)據(jù) 252

5．6．12 頁(yè)面之間的跳轉(zhuǎn) 253

5．6．13 優(yōu)化與改進(jìn) 256

5．6．14 添加單元測(cè)試 257

5．7 小結(jié) 258

第6章 Redux 高階運(yùn)用 259

6．1 高階 reducer 259

6．1．1 reducer 的復(fù)用 259

6．1．2 reducer 的增強(qiáng) 261

6．2 Redux 與表單 262

6．2．1 使用 redux-form-utils 減少

創(chuàng)建表單的冗余代碼 263

6．2．2 使用 redux-form 完成表單的

異步驗(yàn)證 265

6．2．3 使用高階 reducer 為現(xiàn)有模塊

引入表單功能 267

6．3 Redux CRUD 實(shí)戰(zhàn) 268

6．3．1 準(zhǔn)備工作 268

6．3．2 使用 Table 組件完成“查”

功能 269

6．3．3 使用 Modal 組件完成“增”

與“改” 274

6．3．4 巧用 Modal 實(shí)現(xiàn)數(shù)據(jù)的刪除

確認(rèn) 277

6．3．5 善用 promise 玩轉(zhuǎn) Redux 異步事件流 278

6．4 Redux 性能優(yōu)化 279

6．4．1 Reselect 280

6．4．2 Immutable Redux 282

6．4．3 Reducer 性能優(yōu)化 282

6．5 解讀 Redux 284

6．5．1 參數(shù)歸一化 285

6．5．2 初始狀態(tài)及 getState 286

6．5．3 subscribe 286

6．5．4 dispatch 287

6．5．5 replaceReducer 288

6．6 解讀 react-redux 288

6．6．1 Provider 288

6．6．2  connect 290

6．6．3 代碼熱替換 293

6．7 小結(jié) 294

第7章 React 服務(wù)端渲染 295

7．1 React 與服務(wù)端模板 295

7．1．1 什么是服務(wù)端渲染 295

7．1．2 react-view 296

7．1．3 react-view 源碼解讀 296

7．2 React 服務(wù)端渲染 299

7．2．1 玩轉(zhuǎn) Node．js 300

7．2．2 React-Router 和 Koa-Router 

統(tǒng)一 303

7．2．3 同構(gòu)數(shù)據(jù)處理的探討 306

7．3 小結(jié) 307

第8章 玩轉(zhuǎn) React 可視化 308

8．1 React 結(jié)合 Canvas 和 SVG 308

8．1．1 Canvas 與 SVG 308

8．1．2 在 React 中的 Canvas 310

8．1．3 React 中的 SVG 311

8．2 React 與可視化組件 316

8．2．1 包裝已有的可視化庫(kù) 316

8．2．2 使用 D3 繪制 UI 部分 317

8．2．3 使用 React 繪制 UI 部分 319

8．3 Recharts 組件化的原理 322

8．3．1 聲明式的標(biāo)簽 323

8．3．2 貼近原生的配置項(xiàng) 325

8．3．3 接口式的 API 326

8．4 小結(jié) 328

附錄A 開發(fā)環(huán)境 329

附錄B 編碼規(guī)范 345

附錄C Koa middleware 349

使用說明

1、下載并解壓，得出pdf文件

2、如果打不開本文件，請(qǐng)務(wù)必下載pdf閱讀器

3、安裝后，在打開解壓得出的pdf文件

4、雙擊進(jìn)行閱讀