【现货速发】REACT进阶之路

前    言

当今，前端应用需要解决的业务场景正变得越来越复杂，这也直接推动了前端技术的迅速发展，各种框架和类库日新月异、层出不穷。面对众多的框架和类库，前端开发者可能感到眼花缭乱，但换一个角度来看，这未尝不是一种百家争鸣的现象。不同框架和类库的设计思想和设计理念各有千秋，解决的问题也有所不同，这些多元化和差异化不断推动前端技术的发展，同时也是前端技术领域的一份思想瑰宝。

React作为当今众多新技术的一个代表，由Facebook开源，致力于解决复杂视图层的开发问题，它提出一种全新的UI组件的开发理念，降低了视图层的开发复杂度，提高了视图层的开发效率，让页面开发变得简单、高效、可控。此外，React不仅是单一的类库，更是一个技术栈生态，可以和生态中的Redux、MobX等其他技术结合使用，构建可扩展、易维护、高性能的大型Web应用。

本书内容

本书涵盖React技术栈中的主要技术，内容由浅到深。本书内容分为基础篇、进阶篇和实战篇，每一篇内容又分成若干章节来介绍。

基础篇，介绍了React的基本概念，包括React的开发环境和开发工具、React的基本用法和React 16的新特性。每个知识点都有配套的项目示例。

进阶篇，深入介绍了React的几个重要概念，如组件state、虚拟DOM、高阶组件等，此外，还针对初学者使用React时容易产生困惑的知识点做了专门讲解，如组件与服务器通信、组件之间通信、组件的ref属性等。

实战篇，介绍了React技术栈中重要的三个技术：React Router、Redux和MobX，每一个技术都配有详细的项目实战示例。

本书章节的难度逐步递增，各章节的知识存在依赖关系，所以读者需按照章节顺序阅读本书，不要随意跳跃章节，尤其是在阅读实战篇时，务必保证已经掌握了基础篇和进阶篇的内容，否则，阅读实战篇可能会有些吃力。

本书特点

本书的特点是内容全、知识新、实战性强。

内容全：本书不仅详细介绍了React的使用，还详细介绍了React技术栈中常用的其他相关技术：React Router、Redux和MobX。

知识新：本书介绍的知识点都是基于各个框架、类库当前的版本，尤其是涵盖React 16 的新特性和React Router 4的介绍。对于新版本已经不再支持或建议废弃的特性，本书不会再介绍，确保读者所学知识的时效性。

实战性强：本书配有大量示例代码，保证读者学以致用。实战篇使用的简易BBS项目示例接近真实项目场景，但又有所简化，让读者既可以真正理解和领会相关技术在真实项目中的使用方式，又不会因为示例项目过于复杂而影响学习。

本书目标读者

本书面向希望从零开始学习React的初学者，或者已经有一些React使用经验，希望更加全面、深入理解React技术栈的开发人员。

本书中默认的开发环境是Node.js v8.4.0，书中介绍到的几个主要库的版本分别为React 16.1.1、React Router 4.2.2、Redux 3.7.2 及 MobX 3.3.1。

致谢

本书的完成离不开在各个方面给过我支持和帮助的人，请允许我在这里向他们表示感谢。

首先，感谢公司的领导余海峰（Colin）和贺鸣（Sky）对我写书的支持。Colin在百忙之中还抽出时间为本书作序。

其次，感谢我的同事王博、陈小梦、吴福城、詹敏和朱雅琴，他们给本书提出了很多宝贵的意见。

还要感谢我的老婆，2017年，她的新书《时间的格局：让每一分钟为未来增值》出版，这也让我产生了写书的念头，同时她的写书经验也给了我很多帮助。

后，感谢清华大学出版社的王金柱老师，正是缘于他的主动联系，才让我写书的念头变成了行动。他认真、负责的工作态度也保证了本书的顺利问世。

徐  超        

2018年1月1日于上海

目    录

第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  组织项目结构        156

9.2  设计state      161

9.2.1 
错误1：以API作为设计state的依据    161

9.2.2 
错误2：以页面UI为设计state的依据 164