深入React技术栈
出版信息
陈屹 / 人民邮电出版社 / 2016-11-1 / CNY 79.00
内容简介
全面讲述React技术栈的第一本原创图书,pure render专栏主创倾力打造
覆盖React、Flux、Redux及可视化,帮助开发者在实践中深入理解技术和源码
前端组件化主流解决方案,一本书玩转React“全家桶”
本书讲解了非常多的内容,不仅介绍了面向普通用户的API、应用架构和周边工具,还深入介绍了底层实现。此外,本书非常重视实战,每一节都有实际的例子,细节丰富。我从这本书里学到了很多东西,强烈推荐!
——阮一峰,蚂蚁金服技术专家,国内技术圈知名博主,《ES 6标准入门(第2版)》作者
React从诞生起就颠覆了诸多传统前端开发的“铁律”,这种破旧立新开启了前端开发全新的时代。它的用法和理念,代表了现在和未来几年前端技术的潮流风向。如果不想落伍,最好进行系统学习。实践出真知,从牛人的实践中收获自己的真知,恐怕是最好的捷径。这是我看到的第一本React中文原创著作,读来倍感亲切。
——张克军,豆瓣前端专家,国内技术圈知名博主,前端布道师
本书内容翔实,一扫“文档说明书”之风,有大量作者的实战经验。由浅入深,无论你是 React 初学者,还是进阶人士,本书都值得一读!
——寸志,陆金所前端架构师,《前端外刊评论》发起人
本书从几个维度去介绍 React。一是作为 View 库,它怎么实现组件化,以及它背后的实现原理。二是扩展到 Flux 应用架构及重要的衍生品 Redux,它们怎么与 React 结合做应用开发。三是对 React 与 server 的碰撞产生的一些思考。四是讲述它在可视化方面的优势与劣势。
本书适合有一定经验的前端开发人员阅读。
陈屹
前端架构师,就职于阿里巴巴。热衷开源事业,长年专注于前端架构、数据可视化、Node.js等领域,知乎专栏pure render的创办人。
作者简介
陈屹,前端架构师,就职于阿里巴巴。热衷开源事业,长年专注于前端架构、数据可视化、Node.js等领域,知乎专栏pure render的创办人。
目录
第1章 初入React世界1
1.1 React简介1
1.1.1 专注视图层1
1.1.2 Virtual DOM1
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 state21
1.4.2 props23
1.5 React生命周期29
1.5.1 挂载或卸载过程29
1.5.2 数据更新过程30
1.5.3 整体流程33
1.6 React与DOM34
1.6.1 ReactDOM35
1.6.2 ReactDOM的不稳定方法36
1.6.3 refs38
1.6.4 React之外的DOM操作40
1.7 组件化实例:Tabs组件41
1.8 小结47
第2章 漫淡React48
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 Modules66
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 mixin81
2.5.2 高阶组件86
2.5.3 组合式组件开发实践93
2.6 组件性能优化97
2.6.1 纯函数97
2.6.2 PureRender100
2.6.3 Immutable103
2.6.4 key109
2.6.5 react—addons—perf110
2.7 动画111
2.7.1 CSS动画与JavaScript动画111
2.7.2 玩转ReactTransition113
2.7.3 缓动函数116
2.8 自动化测试121
2.8.1 Jest121
2.8.2 Enzyme124
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 解密setState170
3.5 diff算法172
3.5.1 传统diff算法172
3.5.2 详解diff172
3.6 ReactPatch方法181
3.7 小结183
第4章 认识Flux架构模式184
4.1 React独立架构184
4.2 MV*与Flux190
4.2.1 MVC/MVVM190
4.2.2 Flux的解决方案193
4.3 Flux基本概念194
4.4 Flux应用实例198
4.4.1 初始化目录结构198
4.4.2 设计store198
4.4.3 设计actionCreator200
4.4.4 构建controller—view202
4.4.5 重构view203
4.4.6 添加单元测试205
4.5 解读Flux206
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核心API210
5.1.4 与React绑定211
5.1.5 增强Flux的功能212
5.2 Reduxmiddleware212
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 Router225
5.4.2 React Router Redux227
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 连接Redux245
5.6.9 引入Redux Devtools250
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 高阶reducer259
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 ReduxCRUD实战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 Reselect280
6.4.2 Immutable Redux282
6.4.3 Reducer性能优化282
6.5 解读Redux284
6.5.1 参数归一化285
6.5.2 初始状态及getState286
6.5.3 subscribe286
6.5.4 dispatch287
6.5.5 replaceReducer288
6.6 解读react—redux288
6.6.1 Provider288
6.6.2 connect290
6.6.3 代码热替换293
6.7 小结294
第7章 React服务端渲染295
7.1 React与服务端模板295
7.1.1 什么是服务端渲染295
7.1.2 react—view296
7.1.3 react—view源码解读296
7.2 React服务端渲染299
7.2.1 玩转Node.js300
7.2.2 React—Router和Koa—Router统一303
7.2.3 同构数据处理的探讨306
7.3 小结307
第8章 玩转React可视化308
8.1 React结合Canvas和SVG308
8.1.1 Canvas与SVG308
8.1.2 在React中的Canvas310
8.1.3 React中的SVG311
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 接口式的API326
8.4 小结328
附录A 开发环境329
附录B 编码规范345
附录C Koamiddleware349