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 组织项目结构
转载请注明：OnlyLing - Web 前端开发者 » React 深入系列，深入讲解了React中的重点概念、特性和模式等