共计 3260 个字符，预计需要花费 9 分钟才能阅读完成。
React 深入系列，深入讲解了 React 中的重点概念、特性和模式等，旨在帮助大家加深对 React 的理解，以及在项目中更加灵活地使用 React。
React 深入系列 1：React 中的元素、组件、实例和节点
React 中的元素、组件、实例和节点，是 React 中关系密切的 4 个概念，也是很容易让 React 初学者迷惑的 4 个概念。现在，老干部就来详细地介绍这 4 个概念，以及它们之间的联系和区别，满足喜欢咬文嚼字、刨根问底的同学（老干部就是其中一员）的好奇心。
React 元素和组件的概念最重要，也最容易混淆；React 组件实例的概念大家了解即可，几乎使用不到；React 节点有一定使用场景，但看过本文后应该也就不存在理解问题了。
- 元素 (Element)
- 组件 (Component)
- 实例 (Instance）
- 节点 (Node)
React 深入系列 2：组件分类
React 组件有很多种分类方式，常见的分类方式有函数组件和类组件，无状态组件和有状态组件，展示型组件和容器型组件。好吧，这又是一篇咬文嚼字的文章。但是，真正把这几组概念咬清楚、嚼明白后，对于页面的组件划分、组件之间的解耦是大有裨益的。
通过上面的介绍，可以发现这三组概念有很多重叠部分。这三组概念都体现了关注点分离的思想：UI 展现和数据逻辑的分离。函数组件、无状态组件和展示型组件主要关注 UI 展现，类组件、有状态组件和容器型组件主要关注数据逻辑。但由于它们的划分依据不同，它们并非完全等价的概念。它们之间的关联关系可以归纳为：函数组件一定是无状态组件，展示型组件一般是无状态组件；类组件既可以是有状态组件，又可以是无状态组件，容器型组件一般是有状态组件。
- 函数组件和类组件
- 无状态组件和有状态组件
- 展示型组件和容器型组件
React 深入系列 3：Props 和 State
React 的核心思想是组件化的思想，而 React 组件的定义可以通过下面的公式描述：
UI = Component(props, state)
组件根据 props 和 state 两个参数，计算得到对应界面的 UI。可见，props 和 state 是组件的两个重要数据源。
- Props 和 State 本质
- 如何正确修改 State
- State 与 Immutable
React 深入系列 4：组件的生命周期
组件是构建 React 应用的基本单位，组件需要具备数据获取、业务逻辑处理、以及 UI 呈现的能力，而这些能力是要依赖于组件不同的生命周期方法的。组件的生命周期分为 3 个阶段：挂载阶段、更新阶段、卸载阶段，每个阶段都包含相应的生命周期方法。因为是深入系列文章，本文不会仔细介绍每个生命周期方法的使用，而是会重点讲解在使用组件生命周期时，经常遇到的疑问和错误使用方式。
- 服务器数据请求
- 更新阶段方法的调用
- setState 的时机
- render 次数 != 浏览器界面更新次数
React 深入系列 5：事件处理
Web 应用中，事件处理是重要的一环，事件处理将用户的操作行为转换为相应的逻辑执行或界面更新。在 React 中，处理事件响应的方式有多种，本文将详细介绍每一种处理方式的用法、使用场景和优缺点。
三种事件处理的方式，第一种有额外的性能损失；第二种需要手动绑定 this，代码量增多；第三种用到了 ES7 的特性，目前并非默认支持，需要 Babel 插件的支持，但是写法最为简洁，也不需要手动绑定 this。一般推荐使用第二种和第三种方式。
- 使用匿名函数
- 使用组件方法
- 使用属性初始化语法
- 事件响应函数的传参问题
React 深入系列 6：高阶组件
高阶组件是 React 中一个很重要且比较复杂的概念，高阶组件在很多第三方库（如 Redux）中都被经常使用。在项目中用好高阶组件，可以显著提高代码质量。
高阶组件的定义类比于高阶函数的定义。高阶函数接收函数作为参数，并且返回值也是一个函数。类似的，高阶组件接收 React 组件作为参数，并且返回一个新的 React 组件。高阶组件本质上也是一个函数，并不是一个组件，这一点一定不要弄错。
- 基本概念
- 应用场景
- 进阶用法
- 与父组件区别
- 注意事项
React 深入系列 7：React 常用模式
本篇是 React 深入系列的最后一篇，将介绍开发 React 应用时，经常用到的模式，这些模式并非都有官方名称，所以有些模式的命名并不一定准确，请读者主要关注模式的内容。
- 受控组件
- 容器组件
- 高阶组件
- Children 传递
- Render Props
- Provider 组件
作者的新书
新书《React 进阶之路》已上市，请大家多多支持！
目 录
第 1 篇 基础篇——React，一种革命性的 UI 开发理念
第 1 章 初识 React 3
1.1 React 简介 3
1.2 ES 6 语法简介 4
1.3 开发环境及工具介绍 9
1.3.1 基础环境 9
1.3.2 辅助工具 9
1.3.3 Create React App 10
1.4 本章小结 12
第 2 章 React 基础 13
2.1 JSX 13
2.1.1 JSX 简介 13
2.1.2 JSX 语法 14
2.1.3 JSX 不是必需的 16
2.2 组件 17
2.2.1 组件定义 17
2.2.2 组件的 props 18
2.2.3 组件的 state 21
2.2.4 有状态组件和无状态组件 23
2.2.5 属性校验和默认属性 26
2.2.6 组件样式 28
2.2.7 组件和元素 32
2.3 组件的生命周期 34
2.3.1 挂载阶段 34
2.3.2 更新阶段 35
2.3.3 卸载阶段 36
2.4 列表和 Keys 36
2.5 事件处理 39
2.6 表单 43
2.6.1 受控组件 44
2.6.2 非受控组件 51
2.7 本章小结 52
第 3 章 React 16 新特性 53
3.1 render 新的返回类型 53
3.2 错误处理 54
3.3 Portals 56
3.4 自定义 DOM 属性 57
3.5 本章小结 58
第 2 篇 进阶篇——用好 React，你必须要知道的那些事
第 4 章 深入理解组件 60
4.1 组件 state 60
4.1.1 设计合适的 state 60
4.1.2 正确修改 state 63
4.1.3 state 与不可变对象 64
4.2 组件与服务器通信 66
4.2.1 组件挂载阶段通信 66
4.2.2 组件更新阶段通信 67
4.3 组件通信 68
4.3.1 父子组件通信 68
4.3.2 兄弟组件通信 71
4.3.3 Context 75
4.3.4 延伸 78
4.4 特殊的 ref 79
4.4.1 在 DOM 元素上使用 ref 79
4.4.2 在组件上使用 ref 79
4.4.3 父组件访问子组件的 DOM 节点 81
4.5 本章小结 82
第 5 章 虚拟 DOM 和性能优化 83
5.1 虚拟 DOM 83
5.2 Diff 算法 84
5.3 性能优化 87
5.4 性能检测工具 90
5.5 本章小结 91
第 6 章 高阶组件 92
6.1 基本概念 92
6.2 使用场景 93
6.3 参数传递 96
6.4 继承方式实现高阶组件 99
6.5 注意事项 99
6.6 本章小结 101
第 3 篇 实战篇——在大型 Web 应用中使用 React
第 7 章 路由：用 React Router 开发单页面应用 103
7.1 基本用法 103
7.1.1 单页面应用和前端路由 103
7.1.2 React Router 的安装 104
7.1.3 路由器 104
7.1.4 路由配置 105
7.1.5 链接 107
7.2 项目实战 108
7.2.1 后台服务 API 介绍 108
7.2.2 路由设计 111
7.2.3 登录页 113
7.2.4 帖子列表页 117
7.2.5 帖子详情页 125
7.3 代码分片 133
7.4 本章小结 138
第 8 章 Redux：可预测的状态管理机 139
8.1 简介 139
8.1.1 基本概念 139
8.1.2 三大原则 141
8.2 主要组成 141
8.2.1 action 141
8.2.2 reducer 142
8.2.3 store 146
8.3 在 React 中使用 Redux 148
8.3.1 安装 react-redux 148
8.3.2 展示组件和容器组件 148
8.3.3 connect 149
8.3.4 mapStateToProps 150
8.3.5 mapDispatchToProps 150
8.3.6 Provider 组件 151
8.4 中间件与异步操作 152
8.4.1 中间件 152
8.4.2 异步操作 154
8.5 本章小结 155
第 9 章 Redux 项目实战 156
9.1 组织项目结构