《React+Redux前端开发实战》

React+Redux前端开发实战

徐顺发  编著

前言

随着智能手机和移动互联网的普及，前端技术栈从jQuery到Backbone和Knockout，再到Angular、React和Vue，各大框架此起彼伏。如今，前端开发越来越庞大的应用规模和越来越复杂的交互效果远不是早期前端开发者们所能想象的。基于原生JavaScript来构建这些应用显得异常复杂且难以维护。但拥有创造力的开发者们并没有停下脚步，而是不断地寻求新的解决方案。其中，React逐渐成为各种方案中最耀眼的一门技术，它是众多开发者的智慧结晶。

React诞生于Facebook，开源之后立即在前端领域掀起了一股巨浪，得到了众多开发者的青睐。随后，React社区也是蓬勃发展，出现了大量优秀的前端开发工具，为开发者提供了一种不一样的开发体验，也为大家指明了一条充满想象的道路。

《海贼王》中罗杰说，每个人都有自己出场的机会！未来，也许React会在前端的历史浪潮中被人们遗忘，但如今React的设计思想却影响了无数的开发者，当下正是属于它的时代。

本书编写目的

其次，也希望读者认识到，React的设计思想给前端开发带来了非常积极的作用和很大的影响。因此，希望读者能通过阅读本书辩证地看待和思考各类前端组件与框架工具，并提升自己的认知，开阔自己的眼界，这是写作本书的另一个目的。

本书有何特色

1．提供翔实的代码及解读

为了便于读者理解本书内容，提高学习效率，书中的所有实例和项目案例都提供了翔实的源代码，并对源代码做了详细的解读。读者可以通过本书提供的-获取。

2．不仅仅是React.js

本书虽然定位为React的入门与实践读物，但是其内容远远不只是React.js，书中还介绍了当前前端开发所使用的一整套主流技术栈，如ES 6、Webpack、单元测试和Node.js等。

3．有广度，也有深度

从前端到服务器端，从各类知识点的通俗讲解到相关知识点的深入解读，本书不仅有广度，而且还有深度，能够让读者彻底了解React+Redux知识点的前世今生。

本书内容概要

第1章从学习React需要准备的知识和基本概念开始入手，依次介绍了Node.js、NPM、Webpack、ES 6语法、React核心特性和JSX语法等内容。

第2章介绍了React组件的相关知识，不仅可以让读者理解组件化开发的概念，还能动手实践各种React中的组件，并掌握组件之间的通信。

第3章介绍了React的事件、表单和样式等相关知识点，让读者了解如何通过React创建丰富的用户体验。

第4章介绍了React+Redux的数据流管理。虽然本章的主题是介绍React生态中的数据管理工具Redux，但为了让读者了解React+Redux的项目原理，还剖析了目前比较常用的MVC和MVVM等开发模式的架构思想和设计模式理念。

第5章介绍了React的路由功能，帮助读者了解客户端路由的原理，进而使用React中的路由工具react-router实现前端路由。

第6章介绍了React性能及性能优化的相关知识。首先分析了神秘的diff算法，然后介绍了组件渲染和数据结构的底层技术，最后带领读者学习如何开发高性能的React应用。

第7章主要介绍了React服务端渲染（SSR）的相关技术。首先介绍了服务端渲染和客户端渲染的区别，然后介绍了React中服务端渲染的方法，最后通过实例演示了服务端渲染的流程。

第8章介绍了单元测试及单元测试对前端的重要性，并结合React实战项目案例，让读者了解如何使用各种工具实现自动化测试。

第9章通过一个移动端社区项目案例，对React、Redux、react-router和Webpack等内容进行总结，并带领读者动手开发实践。

本书所有实战项目案例的源代码文件都存放在GitHub上，其他可运行的小案例源代码文件都存放在JSFiddle上（有搭建好的环境），读者可以自行下载。

另外，读者还可以在华章公司的网站（www.hzbook.com）上搜索到本书，然后通过页面上的“配书资源”下载链接获取源代码文件。

本书为谁而写

如果您熟悉JavaScript，打算开发跨平台应用程序，且想选择React技术栈，那么本书就是为您而准备的。本书读者对象如下：

学习大前端开发的入门与提高人员；

React开发程序员；

跨平台开发前端人员；

React全栈开发人员；

相关院校的学生；

培训机构的学员。

致谢

读者在阅读本书的过程中若有问题，可以发送电子邮件到hzbook2017@163.com以获取帮助。

目录

前言

第1章  React入门     1

1.1  开始学习React之前    1

1.1.1  下载与使用Node.js和NPM    1

1.1.2  模块打包工具之Browserify     2

1.1.3  模块打包工具之Webpack      3

1.1.4  第一个Webpack构建实战      6

1.1.5  Webpack loader实战      7

1.1.6  Webpack配置详解   9

1.1.7  ES 6语法    15

1.2  React简介    22

1.3  React的特征 23

1.3.1  组件化       23

1.3.2  虚拟DOM  24

1.3.3  单向数据流       25

1.4  JSX语法 25

1.4.1  JSX简介     25

1.4.2  JSX的转译 27

1.4.3  JSX的用法 29

1.5  Hello World实战训练 34

1.5.1  不涉及项目构建的Hello World      34

1.5.2  基于Webpack的Hello World 35

1.5.3  Hello World进阶      39

第2章  React的组件  44

2.1  组件的声明方式   44

2.1.1  ES 5写法：React.createClass()        44

2.1.2  ES 6写法：React.Component 45

2.1.3  无状态组件       46

2.2  组件的主要成员   47

2.2.1  状态（state）    47

2.2.2  属性（props）  49

2.2.3  render()方法      49

2.3  组件之间的通信   52

2.3.1  父组件向子组件通信       52

2.3.2  子组件向父组件通信       53

2.3.3  跨级组件通信    54

2.3.4  非嵌套组件通信       56

2.4  组件的生命周期   58

2.4.1  组件的挂载       58

2.4.2  数据的更新过程       60

2.4.3  组件的卸载（unmounting）  61

2.4.4  错误处理    61

2.4.5  老版React中的生命周期 62

2.4.6  生命周期整体流程总结    63

2.5  组件化实战训练——TodoList    64

第3章  React的事件与表单     70

3.1  事件系统      70

3.1.1  合成事件的事件代理       70

3.1.2  事件的自动绑定       71

3.1.3  在React中使用原生事件 73

3.1.4  合成事件与原生事件混用       73

3.2  表单（Forms）    75

3.2.1  受控组件    75

3.2.2  非受控组件       77

3.2.3  受控组件和非受控组件对比    78

3.2.4  表单组件的几个重要属性       80

3.3  React的样式处理 80

3.3.1  基本样式设置    80

3.3.2  CSS Modules样式设置    82

第4章  React+Redux数据流管理    86

4.1  Flux架构      86

4.1.1  MVC和MVVM  86

4.1.2  Flux介绍    90

4.1.3  深入Flux    91

4.1.4  Flux的缺点 96

4.1.5  Flux架构小结    97

4.2  Redux状态管理工具   97

4.2.1  Redux简介 97

4.2.2  Redux的使用场景    98

4.2.3  Redux的动机    99

4.2.4  Redux三大特性 99

4.2.5  Redux的组成——拆解商城购物车实例 100

4.2.6  Redux搭配React使用     105

4.3  middleware中间件     109

4.3.1  为何需要middleware      109

4.3.2  深入理解middleware      109

4.4  Redux实战训练——网上书店   113

4.4.1  目录结构    113

4.4.2  应用入口 src/index.js      114

4.4.3  Action的创建和触发       116

4.4.4  Reducer的创建 118

4.4.5  UI展示组件的创建   122

4.4.6  发起一个动作Action（添加商品到购物车）       124

第5章  路由       127

5.1  前端路由简介      127

5.2  前端路由的实现原理   127

5.2.1  history API方式 128

5.2.2  Hash方式  129

5.3  react-router路由配置 130

5.3.1  react-router的安装  131

5.3.2  路由配置    131

5.3.3  默认路由    132

5.3.4  路由嵌套    133

5.3.5  重定向       133

5.4  react-router下的history    134

5.4.1  browserHistory模式 134

5.4.2  hashHistory模式      135

5.4.3  createMemoryHistory模式     135

5.5  react-router路由切换 135

5.5.1  Link标签    135

5.5.2  history属性       136

5.5.3  传参    137

5.6  进入和离开的Hook    137

5.6.1  onEnter简介     137

5.6.2  onLeave简介    138

第6章  React的性能及性能优化     139

6.1  diff算法 139

6.1.1  时间复杂度和空间复杂度       139

6.1.2  diff策略     141

6.1.3  key属性     148

6.2  组件重新渲染      149

6.3  PureRender纯渲染     152

6.4  Immutable持久性数据结构库   153

6.4.1  Immutable的作用    153

6.4.2  Immutable的优缺点 155

6.4.3  Immutable和原生JavaScript对象相互转换  156

6.4.4  Immutable中的对象比较 156

6.4.5  Immutable与React配合使用  157

第7章  React服务端渲染  159

7.1  客户端渲染和服务端渲染的区别      159

7.2  在React中实现服务端渲染       160

7.2.1  为何需要服务端渲染       160

7.2.2  服务端渲染中的API 161

7.2.3  渲染方法    161

7.2.4  状态管理    165

7.2.5  Express框架简介      166

7.2.6  路由和HTTP请求     169

7.3  实战训练——服务端渲染   172

7.3.1  项目结构    172

7.3.2  项目实现    172

第8章  自动化测试    178

8.1  测试的作用   178

8.2  单元测试简介      178

8.3  测试工具      180

8.3.1  常见的测试工具       180

8.3.2  React的测试工具     181

8.3.3  单元测试工具Jest    181

8.3.4  单元测试工具Enzyme     187

8.4  Jest和Enzyme实战训练    189

8.4.1  Jest和Enzyme的配置     191

8.4.2  测试From组件视图和单击事件     193

8.4.3  测试ListItems组件视图   196

第9章  实战——React+Redux搭建社区项目 198

9.1  项目结构      198

9.2  Less文件处理      198

9.3  路由和Redux配置      199

9.3.1  前期配置    199

9.3.2  路由功能的测试       201

9.4  业务入口      202

9.5  首页      203

9.5.1  头部    204

9.5.2  列表内容    205

9.6  详情页   224

9.6.1  静态页面开发    224

9.6.2  根据id获取详情      227

9.6.3  渲染内容    228

9.7  个人中心      230

9.7.1  分析页面功能    231

9.7.2  模拟用户登录和登出       232

9.8  实战项目回顾      234

Redux React web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。