第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