深入React技术栈

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

.　　第5章这一章介绍了业界炙手可热的应用架构Redux，从构建一个 SPA 应用讲到背后的
　　实现逻辑，并扩展了Redux生态圈中常用的middleware和utils方法。
　　第6章这一章讲述Redux高阶运用，包括高阶reducer、它在表单中的运用以及性能优化的方法。另外，从源码的角度解读了Redux。
　　第7章这一章介绍了 React 在服务端渲染的方法，并从一个实例出发结合Koa完整地讲
　　述了同构的实现。
　　第8章这一章探索了实现可视化图形图表的方法，以及如何通过这些方法和 React 结合在一起运转。
　　附录A探讨了React开发环境的基本组成部分以及常规的安装方法。
　　附录B探讨了团队实践或多人协作过程中需要关注的编码规范问题。
　　附录C探讨了 Koa middleware 的相关知识，帮助理解 Redux middleware。
　　代码规范
　　本书的JavaScript 示例代码均使用ES2015/ES6编写，并遵循 Airbnb JavaScript 规范，但诸如 React 或 Redux 源代码引用的原始代码除外。
　　本书的 CSS 示例代码均为 SCSS 代码，但引用源码库的 CSS 除外。
　　保留英文名词
　　对于React/Flux/Redux 中常用的专有名词，在不造成读者理解困难的情况下，本书尽量保留英文名词，保持原汁原味。
　　? Virtual DOM：虚拟 DOM
　　? state：状态
　　? props：属性
　　? action：动作
　　? reducer
　　? store
　　? middleware：中间件
　　? dispatcher：分发器
　　? action creator：action 构造器
　　? currying：柯里化
　　读者反馈
　　如果你有什么好的意见和建议，请及时反馈给我们。可以通过 i.arcthur@gmail.com 或在知乎上发私信找到我。
　　示例代码下载
　　本书的示例代码 托管在 https://github.com/arcthur/react-book-examples和https://coding.net/u/ arcthur/p/react-book-examples/git，它可能会和书中的内容有所出入，因为我们会根据情况对代码略加修改，所以在阅读的时候，建议结合文档一同查看。
　　致谢
　　从 React 诞生以来，我就在关注这个领域。在 2015 年年底，我在知乎上开辟了名为 pure render 的专栏。不论是我现在的角色，还是从建设一个团队的角度来考虑，我都想把在 React 实践中的心路历程分享出来，和大家一起学习，共同成长。
　　万万没想到，专栏的持续写作得到了相当多知友的认可。截止今天，专栏运行 8 个月左右，积累了20篇文章，得到了 4500 多人的关注。对于团队来说，既是鼓舞，更是压力。专栏在运行过程中，参与的伙伴也渐渐变多，我希望它可以一直保持高质量，让整个社区的 React 爱好者们一起贡献。
　　专栏写作不久，就有几位编辑老师找到我，那时我并没有准备好去系统地撰写一些内容，但随着专栏中沉淀的文字越来越多，我想不妨可以试着写一些关于 React的更深入的分析，以及整体应用层面上的实践，让更多开发者，乃至 IT 圈更多地关注这个库。在写作本书这半年多的时间内，React 在业界的关注度不断上升，也涌现出很多优秀的实践，我非常感谢我身在的这个社区。
　　耗费了大量晚上及周末的时间，断断续续的编写与修改，书稿的内容终于定下来了，其中很多内容是对专栏已有内容的修复与升级。书与专栏同样是文字的传播，平台不同，初衷却是一样的。我希望它可以精益求精，至少能在一定程度上帮助开发者深入学习React。
　　在此，特别感谢知乎 pure render 专栏组的所有成员献计献力，其中杨森、丁玲、李彬彬、黄宗权、范洪春、宋邵茵、胡可本、胡清亮等组员不同程度地贡献了实战经验与想法，并参与审校本书当中。真心感谢你们，是你们的热情和坚持让这本书可以面世。
　　同样感谢写作中给予很多宝贵意见的朋友们，包括魏畅然、赵剑飞、李成熙、胡杰、郭达峰、阮一峰、张克军、寸志、张克炎等。
　　最后，由衷地感谢王军花老师从头到尾认真负责的态度，让这本书更精彩。
　　陈屹
　　2016年7月1日于杭州