深入 React 技术栈

本文目录结构

编辑推荐

全面深入讲述 React 技术栈的第 1 本原创图书，Strikingly 联合创始人及 CTO 郭达峰作序推荐，pure render 专栏主创倾力打造

覆盖 React、Flux、Redux 及可视化，帮助开发者在实践中深入理解技术和源码

前端组件化主流解决方案，一本书玩转 React“全家桶”

内容简介

本书从几个维度去介绍 React。一是作为 View 库，它怎么实现组件化，以及它背后的实现原理。二是扩展到 Flux 应用架构及重要的衍生品 Redux，它们怎么与 React 结合做应用开发。三是对 React 与 server 的碰撞产生的一些思考。四是讲述它在可视化方面的优势与劣势。

本书适合有一定经验的前端开发人员阅读。

作者简介

陈屹，前端架构师，就职于阿里巴巴。热衷开源事业，长年专注于前端架构、数据可视化、Node.js 等领域，知乎专栏 pure render 的创办人。

目录

第 1 章　初入 React 世界 1

• 1．1　React 简介 1
• 1．1．1　专注视图层 1
• 1．1．2　Virtual DOM 1
• 1．1．3　函数式编程 2
• 1．2　JSX 语法 3
• 1．2．1　JSX 的由来 3
• 1．2．2　JSX 基本语法 7
• 1．3　React 组件 11
• 1．3．1　组件的演变 11
• 1．3．2　React 组件的构建 18
• 1．4　React 数据流 21
• 1．4．1　state 21
• 1．4．2　props 23
• 1．5　React 生命周期 29
• 1．5．1　挂载或卸载过程 29
• 1．5．2　数据更新过程 30
• 1．5．3　整体流程 33
• 1．6　React 与 DOM 34
• 1．6．1　ReactDOM 35
• 1．6．2　ReactDOM 的不稳定方法 36
• 1．6．3　refs 38
• 1．6．4　React 之外的 DOM 操作 40
• 1．7　组件化实例：Tabs 组件 41
• 1．8　小结 47

第 2 章　漫淡 React 48

• 2．1　事件系统 48
• 2．1．1　合成事件的绑定方式 48
• 2．1．2　合成事件的实现机制 49
• 2．1．3　在 React 中使用原生事件 51
• 2．1．4　合成事件与原生事件混用 51
• 2．1．5　对比 React 合成事件与 JavaScript 原生事件 54
• 2．2　表单 55
• 2．2．1　应用表单组件 55
• 2．2．2　受控组件 60
• 2．2．3　非受控组件 61
• 2．2．4　对比受控组件和非受控组件 62
• 2．2．5　表单组件的几个重要属性 63
• 2．3　样式处理 64
• 2．3．1　基本样式设置 64
• 2．3．2　CSS Modules 66
• 2．4　组件间通信 74
• 2．4．1　父组件向子组件通信 74
• 2．4．2　子组件向父组件通信 75
• 2．4．3　跨级组件通信 77
• 2．4．4　没有嵌套关系的组件通信 79
• 2．5　组件间抽象 81
• 2．5．1　mixin 81
• 2．5．2　高阶组件 86
• 2．5．3　组合式组件开发实践 93
• 2．6　组件性能优化 97
• 2．6．1　纯函数 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　动画 111
• 2．7．1　CSS 动画与 JavaScript 动画 111
• 2．7．2　玩转 React Transition 113
• 2．7．3　缓动函数 116
• 2．8　自动化测试 121
• 2．8．1　Jest 121
• 2．8．2　Enzyme 124
• 2．8．3　自动化测试 125
• 2．9　组件化实例：优化 Tabs 组件 125
• 2．10　小结 133

第 3 章　解读 React 源码 134

• 3．1　初探 React 源码 134
• 3．2　Virtual DOM 模型 137
• 3．2．1　创建 React 元素 138
• 3．2．2　初始化组件入口 140
• 3．2．3　文本组件 141
• 3．2．4　DOM 标签组件 144
• 3．2．5　自定义组件 150
• 3．3　生命周期的管理艺术 151
• 3．3．1　初探 React 生命周期 152
• 3．3．2　详解 React 生命周期 152
• 3．3．3　无状态组件 163
• 3．4　解密 setState 机制 164
• 3．4．1　setState 异步更新 164
• 3．4．2　setState 循环调用风险 165
• 3．4．3　setState 调用栈 166
• 3．4．4　初识事务 168
• 3．4．5　解密 setState 170
• 3．5　diff 算法 172
• 3．5．1　传统 diff 算法 172
• 3．5．2　详解 diff 172
• 3．6　React Patch 方法 181
• 3．7　小结 183

第 4 章　认识 Flux 架构模式 184

• 4．1　React 独立架构 184
• 4．2　MV* 与 Flux 190
• 4．2．1　MVC/MVVM 190
• 4．2．2　Flux 的解决方案 193
• 4．3　Flux 基本概念 194
• 4．4　Flux 应用实例 198
• 4．4．1　初始化目录结构 198
• 4．4．2　设计 store 198
• 4．4．3　设计 actionCreator 200
• 4．4．4　构建 controller-view 202
• 4．4．5　重构 view 203
• 4．4．6　添加单元测试 205
• 4．5　解读 Flux 206
• 4．5．1　Flux 核心思想 206
• 4．5．2　Flux 的不足 207
• 4．6　小结 207

第 5 章　深入 Redux 应用架构 208

• 5．1　Redux 简介 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　增强 Flux 的功能 212
• 5．2　Redux middleware 212
• 5．2．1　middleware 的由来 212
• 5．2．2　理解 middleware 机制 213
• 5．3　Redux 异步流 217
• 5．3．1　使用 middleware 简化异步
• 请求 217
• 5．3．2　使用 middleware 处理复杂
• 异步流 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 应用实例 231
• 5．6．1　初始化 Redux 项目 231
• 5．6．2　划分目录结构 232
• 5．6．3　设计路由 234
• 5．6．4　让应用跑起来 235
• 5．6．5　优化构建脚本 239
• 5．6．6　添加布局文件 239
• 5．6．7　准备首页的数据 242
• 5．6．8　连接 Redux 245
• 5．6．9　引入 Redux Devtools 250
• 5．6．10　利用 middleware 实现 Ajax
• 请求发送 251
• 5．6．11　请求本地的数据 252
• 5．6．12　页面之间的跳转 253
• 5．6．13　优化与改进 256
• 5．6．14　添加单元测试 257
• 5．7　小结 258

第 6 章　Redux 高阶运用 259

• 6．1　高阶 reducer 259

• 6．1．1　reducer 的复用 259

• 6．1．2　reducer 的增强 261

• 6．2　Redux 与表单 262

• 6．2．1　使用 redux-form-utils 减少

• 创建表单的冗余代码 263

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

• 异步验证 265

• 6．2．3　使用高阶 reducer 为现有模块

• 引入表单功能 267

• 6．3　Redux CRUD 实战 268

• 6．3．1　准备工作 268

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

• 功能 269

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

• 与“改” 274

• 6．3．4　巧用 Modal 实现数据的删除

• 确认 277

• 6．3．5　善用 promise 玩转 Redux 异步事件流 278

• 6．4　Redux 性能优化 279

• 6．4．1　Reselect 280

• 6．4．2　Immutable Redux 282

• 6．4．3　Reducer 性能优化 282

• 6．5　解读 Redux 284

• 6．5．1　参数归一化 285

• 6．5．2　初始状态及 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　小结 294

第 7 章　React 服务端渲染 295

• 7．1　React 与服务端模板 295
• 7．1．1　什么是服务端渲染 295
• 7．1．2　react-view 296
• 7．1．3　react-view 源码解读 296
• 7．2　React 服务端渲染 299
• 7．2．1　玩转 Node．js 300
• 7．2．2　React-Router 和 Koa-Router
• 统一 303
• 7．2．3　同构数据处理的探讨 306
• 7．3　小结 307

第 8 章　玩转 React 可视化 308

• 8．1　React 结合 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　包装已有的可视化库 316
• 8．2．2　使用 D3 绘制 UI 部分 317
• 8．2．3　使用 React 绘制 UI 部分 319
• 8．3　Recharts 组件化的原理 322
• 8．3．1　声明式的标签 323
• 8．3．2　贴近原生的配置项 325
• 8．3．3　接口式的 API 326
• 8．4　小结 328
• 附录 A　开发环境 329
• 附录 B　编码规范 345
• 附录 C　Koa middleware 349