第1章 React与前端 1
1.1 前端简史 1
1.1.1 Web 1.0 2
1.1.2 Web 2.0 2
1.2 React是什么 3
1.2.1 声明式 3
1.2.2 基于组件 4
1.2.3 一次学习,多端受用 4
1.3 React家族 4
1.3.1 React Router 5
1.3.2 Redux 6
1.3.3 React Native 6
1.4 本章小结 7
第2章 深入浅出React 8
2.1 组件 8
2.1.1 createClass 8
2.1.2 Component 9
2.1.3 Functional Component 10
2.1.4 PureComponent 11
2.2 组件与系统 11
2.2.1 传统系统 12
2.2.2 React系统 12
2.3 神奇的JSX 12
2.3.1 createElement 13
2.3.2 JSX 14
2.4 组件的生命周期 14
2.4.1 挂载 15
2.4.2 更新 15
2.4.3 卸载 16
2.5 组件的属性和状态 17
2.5.1 属性 17
2.5.2 状态 19
2.6 组件和事件 22
2.7 组件通信 24
2.7.1 父子组件 24
2.7.2 爷孙组件 28
2.7.3 兄弟组件 29
2.7.4 任意组件 30
2.8 组件的抽象与复用 32
2.8.1 组件的设计与抽象 32
2.8.2 继承 33
2.8.3 组合 34
2.8.4 高阶组件 36
2.9 命令式与DOM 38
2.9.1 ref 39
2.9.2 findDOMNode 40
2.9.3 dangerouslySetInnerHTML 41
2.10 本章小结 41
第3章 Redux应用架构基础 42
3.1 Redux究竟是什么 42
3.1.1 Redux是库结合模式 43
3.1.2 Redux和React的关系 43
3.2 Redux设计哲学 44
3.3 函数式编程和纯函数 48
3.3.1 了解“函数是一等公民” 48
3.3.2 了解纯函数和副作用 49
3.4 Redux基本使用和实践 51
3.4.1 初识store 51
3.4.2 构造action 52
3.4.3 使用action creator(构造器) 53
3.4.4 使用dispatch派发action 54
3.4.5 编写reducer函数更新数据 54
3.4.6 合理拆分reducer函数 55
3.5 Redux开发基础实例 58
3.6 reducer编写关键:不可变性 62
3.6.1 共享和不可变性 62
3.6.2 在Redux架构下保证不可变性 65
3.7 Redux中间件和异步 73
3.7.1 应用redux-logger中间件 74
3.7.2 应用redux-thunk中间件 75
3.7.3 组合使用中间件 78
3.8 Redux与React 78
3.8.1 Redux架构回顾 79
3.8.2 Redux和React衔接点 80
3.8.3 使用react-redux库 82
3.9 实现计数器的四种方式 85
3.9.1 纯React实现 86
3.9.2 纯Redux实现 88
3.9.3 React+Redux实现 90
3.9.4 React+Redux并使用react-redux库实现 92
3.10 完成一个工程化实例 98
3.10.1 项目目录 99
3.10.2 组件划分 100
3.10.3 确定应用数据状态 101
3.10.4 数据状态和相关组件数据分配 103
3.10.5 action和reducer 104
3.10.6 使用react-redux库进行连接 107
3.10.7 使用中间件和接入redux-devtools 109
3.11 本章小结 113
第4章 深入理解Redux 114
4.1 Redux源码探索——store的实现 114
4.2 Redux源码探索——combineReducers的实现 118
4.3 dispatch的改造——实现记录日志 121
4.4 dispatch的改造——识别Promise 124
4.5 糅合多种dispatch 126
4.6 Redux源码探索——中间件的秘密 131
4.6.1 源码剖析 131
4.6.2 写一个中间件的套路 135
4.7 再谈Redux设计思想 136
4.7.1 Redux的特性和限制 137
4.7.2 Redux生态 139
4.8 react-redux究竟是什么 142
4.8.1 Provider组件 142
4.8.2 connect方法 143
4.9 本章小结 145
第5章 揭秘React同构应用 146
5.1 前后端架构设计和服务端渲染概念 146
5.1.1 前后端配合技术的演进 146
5.1.2 技术历史总是惊人的相似 149
5.2 同构应用 150
5.2.1 什么是同构 151
5.2.2 同构的优势和劣势 151
5.3 使用React和Redux实现同构应用 152
5.3.1 使用renderToString和renderToStaticMarkup方法 153
5.3.2 使用renderToNodeStream和renderToStaticNodeStream方法 154
5.3.3 Redux搭配React实现服务端渲染 155
5.4 React 16在服务端渲染上的惊喜 157
5.5 同构项目实战:基于Node.js的“渐进式”流渲染 158
5.5.1 项目背景和技术栈介绍 158
5.5.2 项目目录 158
5.5.3 代码实现 160
5.5.4 同构应用与浏览器端渲染优势对比 166
5.6 Next.js设计理念和使用 168
5.6.1 Next.js的极简理念 168
5.6.2 Next.js设计思想 169
5.7 使用Next.js实现同构应用 172
5.8 本章小结 183
第6章 深入理解React技术内幕与生态社区 184
6.1 React组件的组合和复用——高阶组件 184
6.1.1 高阶组件注意事项和编写原则 185
6.1.2 高阶组件从场景到应用 186
6.2 高阶组件和render prop 193
6.2.1 Mixins的问题 193
6.2.2 高阶组件和Mixins 195
6.2.3 render prop是什么 197
6.3 React组件的组合和复用——Function as Child Component 198
6.4 React组件的组合和复用——Children API 203
6.5 React“轮子”是怎样设计的 209
6.6 setState异步带来的讨论和思考 216
6.6.1 setState的同步和异步之争 217
6.6.2 让setState连续更新的方法 219
6.6.3 setState Promise化的讨论和尝试 220
6.7 React组件和React element到底是什么 221
6.8 实现一个简易的React库 227
6.8.1 准备工作 229
6.8.2 初见雏形 231
6.8.3 持续迭代 233
6.8.4 总结与思考 238
6.9 引入Redux的必要性及利弊 239
6.10 如何设计并应用Redux connect 243
6.11 使用selector实现最佳实践 248
6.11.1 selector使用实例 248
6.11.2 使用神奇的reselect类库 250
6.12 Redux store数据结构扁平化及在Twitter中的实践 255
6.12.1 数据结构扁平化的优化方向和手段 255
6.12.2 Twitter在基于Redux架构下的数据实践 263
6.13 React state和Redux state的选取原则 266
6.14 本章小结 267
第7章 单页面应用代码分割 269
7.1 React和代码分割 269
7.1.1 代码分割的意义和普遍做法 270
7.1.2 基于业务的代码分割 271
7.1.3 合理选择分割维度 273
7.1.4 合理选择加载时机 273
7.1.5 按需加载实现原理 276
7.2 Redux reducer层面代码分割 278
7.3 代码分割工程实例 283
7.3.1 依赖和业务分离 284
7.3.2 按需加载组件 285
7.3.3 收益与总结 287
7.4 本章小结 288
第8章 React应用性能优化 289
8.1 React应用性能的秘密 289
8.1.1 性能到底指什么 289
8.1.2 正确理解React虚拟的DOM带来的优化 291
8.1.3 使用React.addons.Perf进行性能调试 294
8.2 提升React应用性能的建议 295
8.2.1 最大限度地减少重新渲染 295
8.2.2 Redux connect方法隐藏的性能优化思想 297
8.2.3 inline function的反模式 300
8.3 使用PureComponent保证开发性能 302
8.4 Redux中间件和Web Worker 308
8.5 本章小结 311