深入React技术栈

✍ Scribed by 陈屹

• Publisher: 人民邮电出版社
• Year: 2016
• Tongue: Chinese
• Leaves: 366
• Series: 图灵原创
• Category: Library

✦ Synopsis

全面讲述React技术栈的第一本原创图书，pure render专栏主创倾力打造

覆盖React、Flux、Redux及可视化，帮助开发者在实践中深入理解技术和源码

前端组件化主流解决方案，一本书玩转React“全家桶”

本书讲解了非常多的内容，不仅介绍了面向普通用户的API、应用架构和周边工具，还深入介绍了底层实现。此外，本书非常重视实战，每一节都有实际的例子，细节丰富。我从这本书里学到了很多东西，强烈推荐！

——阮一峰，蚂蚁金服技术专家，国内技术圈知名博主，《ES 6标准入门（第2版）》作者

React从诞生起就颠覆了诸多传统前端开发的“铁律”，这种破旧立新开启了前端开发全新的时代。它的用法和理念，代表了现在和未来几年前端技术的潮流风向。如果不想落伍，最好进行系统学习。实践出真知，从牛人的实践中收获自己的真知，恐怕是最好的捷径。这是我看到的第一本...

全面讲述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的创办人。

✦ Table of Contents

封面
扉页
版权
前言
目录
第1章 初入 React 世界
1.1 React 简介
1.1.1 专注视图层
1.1.2 Virtual DOM
1.1.3 函数式编程
1.2 JSX 语法
1.2.1 JSX 的由来
1.2.2 JSX 基本语法
1.3 React 组件
1.3.1 组件的演变
1.3.2 React 组件的构建
1.4 React 数据流
1.4.1 state
1.4.2 props
1.5 React 生命周期
1.5.1 挂载或卸载过程
1.5.2 数据更新过程
1.5.3 整体流程
1.6 React 与 DOM
1.6.1 ReactDOM
1.6.2 ReactDOM 的不稳定方法
1.6.3 refs
1.6.4 React 之外的 DOM 操作
1.7 组件化实例：Tabs 组件
1.8 小结
第2章 漫谈 React
2.1 事件系统
2.1.1 合成事件的绑定方式
2.1.2 合成事件的实现机制
2.1.3 在 React 中使用原生事件
2.1.4 合成事件与原生事件混用
2.1.5 对比 React 合成事件与 JavaScript 原生事件
2.2 表单
2.2.1 应用表单组件
2.2.2 受控组件
2.2.3 非受控组件
2.2.4 对比受控组件和非受控组件
2.2.5 表单组件的几个重要属性
2.3 样式处理
2.3.1 基本样式设置
2.3.2 CSS Modules
2.4 组件间通信
2.4.1 父组件向子组件通信
2.4.2 子组件向父组件通信
2.4.3 跨级组件通信
2.4.4 没有嵌套关系的组件通信
2.5 组件间抽象
2.5.1 mixin
2.5.2 高阶组件
2.5.3 组合式组件开发实践
2.6 组件性能优化
2.6.1 纯函数
2.6.2 PureRender
2.6.3 Immutable
2.6.4 key
2.6.5 react-addons-perf
2.7 动画
2.7.1 CSS 动画与 JavaScript 动画
2.7.2 玩转 React Transition
2.7.3 缓动函数
2.8 自动化测试
2.8.1 Jest
2.8.2 Enzyme
2.8.3 自动化测试
2.9 组件化实例：优化 Tabs 组件
2.10 小结
第3章 解读 React 源码
3.1 初探 React 源码
3.2 Virtual DOM 模型
3.2.1 创建 React 元素
3.2.2 初始化组件入口
3.2.3 文本组件
3.2.4 DOM 标签组件
3.2.5 自定义组件
3.3 生命周期的管理艺术
3.3.1 初探 React 生命周期
3.3.2 详解 React 生命周期
3.3.3 无状态组件
3.4 解密 setState 机制
3.4.1 setState 异步更新
3.4.2 setState 循环调用风险
3.4.3 setState 调用栈
3.4.4 初识事务
3.4.5 解密setState
3.5 diff 算法
3.5.1 传统 diff 算法
3.5.2 详解 diff
3.6 React Patch 方法
3.7 小结
第4章 认识 Flux 架构模式
4.1 React 独立架构
4.2 MV* 与 Flux
4.2.1 MVC/MVVM
4.2.2 Flux 的解决方案
4.3 Flux 基本概念
4.4 Flux 应用实例
4.4.1 初始化目录结构
4.4.2 设计 store
4.4.3 设计 actionCreator
4.4.4 构建 controller-view
4.4.5 重构 view
4.4.6 添加单元测试
4.5 解读 Flux
4.5.1 Flux 核心思想
4.5.2 Flux 的不足
4.6 小结
第5章 深入 Redux 应用架构
5.1 Redux 简介
5.1.1 Redux 是什么
5.1.2 Redux 三大原则
5.1.3 Redux 核心 API
5.1.4 与 React 绑定
5.1.5 增强 Flux 的功能
5.2 Redux middleware
5.2.1 middleware 的由来
5.2.2 理解 middleware 机制
5.3 Redux 异步流
5.3.1 使用 middleware 简化异步请求
5.3.2 使用 middleware 处理复杂异步流
5.4 Redux 与路由
5.4.1 React Router
5.4.2 React Router Redux
5.5 Redux 与组件
5.5.1 容器型组件
5.5.2 展示型组件
5.5.3 Redux 中的组件
5.6 Redux 应用实例
5.6.1 初始化 Redux 项目
5.6.2 划分目录结构
5.6.3 设计路由
5.6.4 让应用跑起来
5.6.5 优化构建脚本
5.6.6 添加布局文件
5.6.7 准备首页的数据
5.6.8 连接 Redux
5.6.9 引入 Redux Devtools
5.6.10 利用 middleware 实现 Ajax 请求发送
5.6.11 请求本地的数据
5.6.12 页面之间的跳转
5.6.13 优化与改进
5.6.14 添加单元测试
5.7 小结
第6章 Redux 高阶运用
6.1 高阶 reducer
6.1.1 reducer 的复用
6.1.2 reducer 的增强
6.2 Redux 与表单
6.2.1 使用 redux-form-utils 减少创建表单的冗余代码
6.2.2 使用 redux-form 完成表单的异步验证
6.2.3 使用高阶 reducer 为现有模块引入表单功能
6.3 Redux CRUD 实战
6.3.1 准备工作
6.3.2 使用 Table 组件完成“查”功能
6.3.3 使用 Modal 组件完成“增”与“改”
6.3.4 巧用 Modal 实现数据的删除确认
6.3.5 善用 promise 玩转 Redux 异步事件流
6.4 Redux 性能优化
6.4.1 Reselect
6.4.2 Immutable Redux
6.4.3 Reducer 性能优化
6.5 解读 Redux
6.5.1 参数归一化
6.5.2 初始状态及 getState
6.5.3 subscribe
6.5.4 dispatch
6.5.5 replaceReducer
6.6 解读 react-redux
6.6.1 Provider
6.6.2 connect
6.6.3 代码热替换
6.7 小结
第7章 React 服务端渲染
7.1 React 与服务端模板
7.1.1 什么是服务端渲染
7.1.2 react-view
7.1.3 react-view 源码解读
7.2 React 服务端渲染
7.2.1 玩转 Node.js
7.2.2 React-Router 和 Koa-Router 统一
7.2.3 同构数据处理的探讨
7.3 小结
第8章 玩转 React 可视化
8.1 React 结合 Canvas 和 SVG
8.1.1 Canvas 与 SVG
8.1.2 在 React 中的 Canvas
8.1.3 React 中的 SVG
8.2 React 与可视化组件
8.2.1 包装已有的可视化库
8.2.2 使用 D3 绘制 UI 部分
8.2.3 使用 React 绘制 UI 部分
8.3 Recharts 组件化的原理
8.3.1 声明式的标签
8.3.2 贴近原生的配置项
8.3.3 接口式的 API
8.4 小结
附录A　开发环境
A.1 运行开发环境：Node.js
A.2 ES6 编译工具：Babel
A.3 CSS 预处理器：Sass
A.4 测试环境：Karma
A.5 工程构建工具：webpack
A.5.1 开发环境配置
A.5.2 线上环境配置
A.6 安装React 环境
A.7 小结
附录B　编码规范
B.1 使用 ESLint
B.2 使用 EditorConfig
B.3 小结
附录C　Koa middleware
C.1 generator
C.2 middleware 原理分析