深入浅出React和Redux

资深架构师十余年工程经验结晶。由浅入深介绍如何用React和Redux构建前端项目，产出高质量易维护代码

React和Redux结合，能帮助前端工程师更好地开发高质量应用。本书作者用生动幽默的语言，详细讲述了为何、如何在生产环境下使用React+Redux，避免复杂的技术栈配置，快速上手前端开发。本书不仅讲解了实用的空间和应用构建方式，而且介绍各种框架演进的过程，揭示其背后的发展规律。讲解细腻，条理清晰，包含了作者多年的实战经验。

本书由浅入深地介绍如何用React和Redux构建现代化的、高效的前端项目，产出高质量的前端代码。共有12章。第1章介绍和传统网页开发相比React应用开发的独特方式。第2章通过实际开发一个ControlPanel组件介绍开发高质量React组件的原则，详细介绍React组件的生命周期和数据管理方式。第3章通过Flux介绍了单向数据流的框架模式，由此引出比Flux更优秀的Redux框架，比较了不同框架的优劣。第4章开发了一个Todo应用，介绍将React和Redux结合的方法。第5章通过对Todo应用的性能优化，介绍提高React组件渲染性的方法，以及提高从Store获取数据性能的方法。第6章介绍高阶组件和“以函数为子组件”的模式。第7章介绍如何在React和Redux的环境中实现和服务器通信。第8章介绍针对React和Redux的单元测试技巧。第9章介绍创建中间件和Store Enhancer的技巧。第10章介绍在React中通过ReactTransitionGroup和React-Motion库实现动画的技巧。第11章介绍如何创建多页面路由，以及为了提高网页装载性能的代码分片技巧。第12章介绍同构的概念和方法，介绍如何将React组件在服务器端和浏览器端进行渲染。

程墨,资深架构师，曾任职于摩托罗拉、雅虎和微软，云鸟配送平台联合创始人，目前服务于美国视频服务公司Hulu。

“React和Redux帮助我们重新思考前端网页的构建方式，希望更多的开发者能够熟悉这两种技术，阅读这本书就是一个很好的开始。”

—— 诸葛越，Hulu公司全球研发副总裁，中国研发中心总经理

“程墨在Velocity China上的演讲很精彩，他能够把复杂的技术问题讲解得透彻、幽默。希望他的这本书也能给读者带来不同以往的技术书籍阅读体验，像Head First系列一样生动有趣。”

——Douglas Wan，Chief Editor of O’Reilly Media Inc. Beijing

“阅读程墨的书，不仅能获得对一种技术的理解，而且能深入体会这种技术选择背后的动因，知其然也要知其所以然，这本书在这方面做得相当出色。”

—— 秦适，微博易、云鸟配送联合创始人兼CTO

前言
第1章　React新的前端思维方式1
1.1　初始化一个React项目1
1.2　增加一个新的React组件3
1.2.1　JSX6
1.2.2　JSX是进步还是倒退7
1.3　分解React应用8
1.4　React的工作方式10
1.4.1　jQuery如何工作10
1.4.2　React的理念11
1.4.3　Virtual DOM12
1.4.4　React工作方式的优点13
1.5　本章小结14
第2章　设计高质量的React组件16
2.1　易于维护组件的设计要素16
2.2　React组件的数据17
2.2.1　React的prop18
2.2.2　React的state22
2.2.3　prop和state的对比24
2.3　组件的生命周期25
2.3.1　装载过程25
2.3.2　更新过程30
2.3.3　卸载过程34
2.4　组件向外传递数据34
2.5　React组件state和prop的局限37
2.6　本章小结39
第3章　从Flux到Redux40
3.1　Flux40
3.1.1　MVC框架的缺陷41
3.1.2　Flux应用43
3.1.3　Flux的优势53
3.1.4　Flux的不足54
3.2　Redux56
3.2.1　Redux的基本原则56
3.2.2　Redux实例59
3.2.3　容器组件和傻瓜组件64
3.2.4　组件Context67
3.2.5　React-Redux71
3.3　本章小结73
第4章　模块化React和Redux应用75
4.1　模块化应用要点75
4.2　代码文件的组织方式76
4.2.1　按角色组织76
4.2.2　按功能组织78
4.3　模块接口79
4.4　状态树的设计81
4.4.1　一个状态节点只属于一个模块82
4.4.2　避免冗余数据82
4.4.3　树形结构扁平83
4.5　Todo应用实例83
4.5.1　Todo状态设计84
4.5.2　action构造函数86
4.5.3　组合reducer87
4.5.4　Todo视图90
4.5.5　样式 98
4.5.6　不使用ref99
4.6　开发辅助工具100
4.6.1　Chrome扩展包100
4.6.2　redux-immutable-state-invariant辅助包101
4.6.3　工具应用101
4.7　本章小结103
第5章　React组件的性能优化105
5.1　单个React组件的性能优化105
5.1.1　发现浪费的渲染时间106
5.1.2　性能优化的时机107
5.1.3　React-Redux的should-ComponentUpdate实现108
5.2　多个React组件的性能优化115
5.2.1　React的调和（Reconciliation）过程116
5.2.2　Key的用法120
5.3　用reselect提高数据获取性能122
5.3.1　两阶段选择过程123
5.3.2　范式化状态树125
5.4　本章小结127
第6章　React高级组件129
6.1　高阶组件129
6.1.1　代理方式的高阶组件132
6.1.2　继承方式的高阶组件136
6.1.3　高阶组件的显示名139
6.1.4　曾经的React Mixin139
6.2　以函数为子组件140
6.2.1　实例CountDown142
6.2.2　性能优化问题145
6.3　本章小结146
第7章　Redux和服务器通信147
7.1　React组件访问服务器147
7.1.1　代理功能访问API148
7.1.2　React组件访问服务器的生命周期150
7.1.3　React组件访问服务器的优缺点153
7.2　Redux访问服务器154
7.2.1　redux-thunk中间件154
7.2.2　异步action对象 156
7.2.3　异步操作的模式157
7.2.4　异步操作的中止 163
7.3　Redux异步操作的其他方法165
7.3.1　如何挑选异步操作方式165
7.3.2　利用Promise实现异步操作167
7.4　本章小结　167
第8章　单元测试168
8.1　单元测试的原则168
8.2　单元测试环境搭建170
8.2.1　单元测试框架170
8.2.2　单元测试代码组织172
8.2.3　辅助工具173
8.3　单元测试实例175
8.3.1　action构造函数测试175
8.3.2　异步action构造函数测试176
8.3.3　reducer测试178
8.3.4　无状态React组件测试178
8.3.5　被连接的React组件测试179
8.4　本章小结180
第9章　扩展Redux182
9.2　中间件182
9.1.1　中间件接口183
9.1.2　使用中间件186
9.1.3　Promise中间件187
9.1.4　中间件开发原则190
9.2　Store Enhancer 191
9.2.1　增强器接口191
9.2.2　增强器实例reset192
9.3　本章小结194
第10章　动画195
10.1　动画的实现方式195
10.1.1　CSS3方式195
10.1.2　脚本方式197
10.2　ReactCSSTransitionGroup199
10.2.1　Todo应用动画200
10.2.2　ReactCSSTransitionGroup规则202
10.3　React-Motion动画库205
10.3.1　React-Motion的设计原则205
10.3.2　Todo应用动画206
10.4　本章小结210
第11章　多页面应用211
11.1　单页应用211
11.2　React-Router213
11.2.1　路由213
11.2.2　路由链接和嵌套216
11.2.3　默认链接218
11.2.4　集成Redux219
11.3　代码分片221
11.3.1　弹射和配置webpack224
11.3.2　动态加载分片225
11.3.3　动态更新Store的reducer和状态228
11.4　本章小结234
第12章　同构235
12.1　服务器端渲染vs浏览器端渲染235
12.2　构建渲染动态内容服务器239
12.2.1　设置Node.js和Express240
12.2.2　热加载242
12.3　React同构246
12.3.1　React服务器端渲染HTML247
12.3.2　脱水和注水248
12.3.3　服务器端Redux Store249
12.3.4　支持服务器和浏览器获取共同数据源250
12.3.5　服务器端路由251
12.4　同构实例252
12.5　本章小结257
结语258

　　互联网技术发展一日千里，网页应用开发技术也不例外，这本书介绍的是在这一领域备受瞩目的两个工具React和Redux。

　　自从jQuery问世以来，它就在网页开发领域占据统治地位，同时，还有许多MVC框架如雨后春笋般出现。但是业界也普遍发现，jQuery和各种MVC框架在开发大型复杂应用时，依然面临很多难以克服的困难。

　　当2014年Facebook推出React时，给整个业界带来全新的看待网页应用开发的方式，和React一同问世的Flux，也克服传统MVC框架的很多弊病。技术在不断发展，在2015年，Flux的一个变体Redux出现，进一步优化了Flux的功能。

　　React和Redux的结合，让网页开发的方式耳目一新，写这本书的初衷，是为了让国内读者能够一睹React和Redux的内在原理并深入实践。

　　在这里深入介绍React和Redux，绝不是贬抑其他前端框架，事实上，开发者应该接触不同的开发模式，才能融会贯通，对技术有一个全面的认识，若要掌握某种技术，就要深入学习，这就是本书的目的。对React和Redux的了解不要只是停留在能用的表面功夫，重要的是理解内在的原理。

　　本书的内容希望读者把阅读这本书的过程当做一个旅程，由浅入深地了解React和Redux，如果你对React和Redux技术已经有一些了解，可以直接跳到感兴趣的章节。本书包括12章，如下所示。

　　第1章，React新的前端思维方式。实际操作快速创建一个React应用，介绍和传统网页开发相比React应用开发的独特方式。

　　第2章，设计高质量的React组件。React提倡基于组件的设计，这一章通过开发一个ControlPanel组件的实践，介绍了开发高质量React组件的原则，详细介绍React组件的生命周期和数据管理方式。

　　第3章，从Flux到Redux。通过Flux介绍了单向数据流的框架模式，由此引出比Flux更优秀的Redux框架，通过用不同框架实现ControlPanel应用可以比较框架的优劣。

　　第4章，模块化React和Redux应用。这一章通过开发一个Todo应用介绍将React和Redux结合的方法。

　　第5章，React组件的性能优化。通过对Todo应用的性能优化，介绍提高React组件渲染性的方法，以及提高从Store获取数据性能的方法。

　　第6章，React高级组件。介绍高阶组件和“以函数为子组件”的模式。

　　第7章，Redux和服务器通信。通过开发一个天气信息应用的实践，介绍应如何在React和Redux的环境中实现与服务器的通信。

　　第8章，单元测试。介绍针对React和Redux的单元测试技巧。

　　第9章，扩展Redux。介绍创建中间件和StoreEnhancer的技巧。

　　第10章，动画。介绍在React中通过ReactTransitionGroup和React-Motion库实现动画的技巧。

　　第11章，多页面应用。介绍如何创建多页面路由，以及为了提高网页装载性能的代码分片技巧。

　　第12章，同构。创建让React组件能够在服务器端和浏览器端渲染的技术。

　　本书的目标读者阅读这本书只需要一些基本的JavaScript、HTML和CSS知识，了解网页应用的工作原理，就足够具备体验React和Redux这种全新的开发方式。

　　如果你熟悉传统的jQuery应用开发，那么通过阅读本书会让你发现不一样的应用构建模式；如果你之前学习过Angular.js或者Vue.js，那么对理解React和Redux的工作机理很有帮助，同时有机会体验同样一种思想的不同实现之道。

　　即使你对React和Redux已经有了一定认识，相信阅读此书也不会让你觉得是浪费时间，因为书中不只是介绍“如何去做”，更多地还解释了“为什么这么做”，相信阅读此书会让你对React和Redux会有更多更深的认识。

　　源代码本书每章都附带大量的实际代码例子，因为篇幅所限，在书中不可能包含所有代码，读者可以在Github（网址https://github.com/mocheng/react-and-redux）上找到所有代码，代码按照所属章节内容组织。

　　如果读者发现代码或者书中的错误，可以直接在上面网址对应的代码库中提交问题，请不吝斧正。

　　致谢首先要感谢我的家人，没有他们的帮助和理解，这本书不可能完成。

　　感谢Hulu公司，本书中的很多内容都是和Hulu的研发团队协同合作中得到的体会。

　　感谢机械工业出版社的吴怡编辑，因为她的鼓励和帮助，这本书才得以问世。

　　最后要感谢React和Redux社区，因为千千万万开发者以开放的心态贡献代码和积极讨论，前端开发技术才获得巨大的飞跃，这个世界才变得更加美好。