深入React技术栈pdf

深入React技术栈 内容简介

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

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

深入React技术栈 目录

第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

深入React技术栈 精彩文摘

欢迎进入React世界。从本章开始，不论你是刚刚入门的前端开发者，还是经验老道的资深工程师，都可以学习到React的基本思想以及基本用法。在之后慢慢深入的过程中，各节均会不同程度地带上进阶的实践与分析。希望在本章结束时，我们能够带领你实现应用React进行基本的组件开发。请从这里开始你的旅程……

React是Facebook在2013年开源在GitHub上的JavaScript库。React把用户界面抽象成一个个组件，如按钮组件Button、对话框组件Dialog、日期组件Calendar。开发者通过组合这些组件，最终得到功能丰富、可交互的页面。通过引入JSX语法，复用组件变得非常容易，同时也能保证组件结构清晰。有了组件这层抽象，React把代码和真实渲染目标隔离开来，除了可以在浏览器端渲染到DOM来开发网页外，还能用于开发原生移动应用。

现在的应用已经变得前所未有的复杂，因而开发工具也必须变得越来越强大。和Angular、Ember等框架不同，React并不是完整的MVC/MVVM框架，它专注于提供清晰、简洁的View（视图）层解决方案。而又与模板引擎不同，React不仅专注于解决View层的问题，又是一个包括View和Controller的库。对于复杂的应用，可以根据应用场景自行选择业务层框架，并根据需要搭配Flux、Redux、GraphQL/Relay来使用。

React不像其他框架那样提供了许多复杂的概念与烦琐的API，它以Minimal API Interface为目标，只提供组件化相关的非常少量的API。同时为了保持灵活性，它没有自创一套规则，而是尽可能地让用户使用原生JavaScript进行开发。只要熟悉原生JavaScript并了解重要概念后，就可以很容易上手React应用开发。

真实页面对应一个DOM树。在传统页面的开发模式中，每次需要更新页面时，都要手动操作DOM来进行更新，如图1-1所示。

DOM操作非常昂贵。我们都知道在前端开发中，性能消耗最大的就是DOM操作，而且这部分代码会让整体项目的代码变得难以维护。React把真实DOM树转换成JavaScript对象树，也就是Virtual DOM，如图1-2所示。

每次数据更新后，重新计算Virtual DOM，并和上一次生成的Virtual DOM做对比，对发生变化的部分做批量更新。React也提供了直观的shouldComponentUpdate生命周期回调，来减少数据变化后不必要的Virtual DOM对比过程，以保证性能。

我们说Virtual DOM提升了React的性能，但这并不是React的唯一亮点。此外，Virtual DOM的渲染方式也比传统DOM操作好一些，但并不明显，因为对比DOM节点也是需要计算资源的。

它最大的好处其实还在于方便和其他平台集成，比如react-native是基于Virtual DOM渲染出原生控件，因为React组件可以映射为对应的原生控件。在输出的时候，是输出Web DOM，还是Android控件，还是iOS控件，就由平台本身决定了。因此，react-native有一个口号——Learn Once，Write Anywhere。

在过去，工业界的编程方式一直以命令式编程为主。命令式编程解决的是做什么的问题，比如图灵机，而现代计算机就是一个经历了多次进化的高级图灵机。如果说人脑最擅长的是分析问题，那么电脑最擅长的就是执行指令，电脑只需要几条汇编指令就可以轻松算出我们需要很长时间才能解出的运算。