React状态管理与同构实战

React自开源以来，便以革命性的设计理念迅速颠覆了前端开发的传统意义，其倡导的组件化、状态管理、虚拟DOM等思想极大提高了前端开发效率。为了更加高效地维护React应用的数据状态，以Redux为代表的数据管理模式横空出世。

本书以React技术栈为核心，在介绍React用法的基础上，从源码层面分析了Redux思想，同时着重介绍了服务端渲染和同构应用的架构模式。书中包含许多项目实例，不仅为用户打开了React技术栈的大门，更能提升读者对前沿领域的整体认知。本书主要适合具有一定JavaScript基础的前端工程师，以及对前端开发感兴趣的相关从业人员阅读。

侯策。硕士毕业于法国国立高等电信学校。曾任职于BePATIENT集团，负责互联网+医疗平台的研发。曾任职于法国能源和苏伊士集团，参与欧洲天然气运输和费用系统的研发。2015年回国加入百度知识搜索部，负责多个产品线的大型技术迭代。行业之外是一名国家二级运动员（足球项目），曾组织过赴北非撒哈拉地区看望孤儿等慈善活动。

颜海镜。知名技术博主，开源达人，常以歪脖无脸男形象作为头像活跃于各大技术网站，经过多年沉淀，专注Web前端开发，先后任职于金山、百度、美团点评，负责前端开发工作。

　　一部颠覆前端历史的框架。
　　React的横空出世颠覆了以往的前端开发方式，本书深入浅出React与Redux相关原理，重点讲解前沿同构技术，揭秘SSR实战要领！
　　两位知名技术博主的沉淀。
　　本书的两位作者都是前端圈内非常活跃的技术博主，拥有丰富的实战经验，经历近十年的沉淀，将鲜活的经验通过本书分享给各位读者！
　　众多圈内技术大咖的力荐。
　　百度公司副总裁沈抖、百度公司资深前端工程师董睿、前端圈知名技术专家阮一峰、狼叔、迷渡（justjavac）、小爝、顾轶灵联合力荐！

　　序1
　　一本书的诞生，可以说既是偶然，也是冥冥之中的必然。
　　当电子工业出版社的孙奇俏编辑第一次联系我向我约稿的时候，恰逢2017年谷雨时节，雨生百谷，万物蓬勃，破土向生。于我个人而言，那段时间正是我回国加入百度，需要迅速积累技术经验的阶段，于是我便无知无畏地开始了近一年的写作旅程。
　　当我在寻找选题时，毫不犹豫地将目光聚焦到了前端开发方向。我相信每位开发者都能清醒地意识到：这个领域既收获着发展，也迎接着淘汰；它既有着与生俱来的混乱，也有着与这种混乱抗衡的秩序；它既批量产生需求与迭代，也制造了同等规模的迷茫与困惑。没错，短短几年时间，前端开发者就脱离了“刀耕火种”的原始时期。
　　伴随着JavaScript语言的不断演进，Node.js强势崛起，HTML 5等技术攻城略地，巨大的信息量和学习成本如潮水般涌来。然而，发展的“副作用”是让开发者感受到前所未有的陌生：一切都在加速向前，自己却只能目瞪口呆。但我想，每个人都不甘心做一个原地踏步的旁观者。
　　这本书的诞生，和试图挣脱这种无力感有关。因此我选取了这场前端“工业革命”中最具代表性的潮头宠儿——React。以React技术栈为主题，将自己学习过程中所见所感的点滴片段用一根主线串起来，不断拓宽思考的边界，吸纳社区智慧进行深度剖析。我想从最初的那些困惑出发，用解读源码、分析设计模式、结合实战案例的方式，探究框架或技术栈“全家桶”的设计思路以及存在意义；探究何为昙花一现的技术趋势，何为永恒持久的思想价值；探究怎样增加对技术的掌控，以避免在快速发展的风暴中随波逐流……
　　React绝不仅仅是一个灵活、高效的视图层开发库。截至本书写作之时，v16.4.1版本共有20个分支，其代码仓库中有近1万次commits，94次发布的背后是1193名贡献者的付出，还有102694个stars和18568个forks，这些数字构建起了一个庞大的技术社区，其背后蕴含了海量的优秀设计思想。
　　在这本书的整个写作过程中，我也再一次感受到了以React为中心的状态管理及同构应用的魔力——我体会到了组件化和传统视图层开发的巨大区别，体会到了数据驱动和面条式操作DOM的不同，体会到了虚拟DOM和性能优化的奥秘，体会到了状态管理背后的精妙设计，体会到了Redux是发布订阅模式和函数式的结晶，体会到了同构应用和服务端渲染的背后是架构设计的螺旋式变迁，是对用户体验和性能的不断打磨和孜孜追求。总之，我体会到了为什么React技术栈能够脱颖而出，因此也真心希望这本书能够对各位读者有所启迪。
　　回想起来，本书大部分内容是在北京完成的：起笔于仲夏，经历过“帝都”雾霾弥漫的冬季，完成于如今农历五月初五的端午佳节。那么索性就以屈原《离骚》中的诗句来结尾吧，与读者共勉。
　　愿我们对技术永远秉承“亦余心之所善兮，虽九死其犹未悔”的追求，以及“路漫漫其修远兮，吾将上下而求索”的态度。
　　侯策
　　2018年6月于北京
　　序2
　　人生需要勇气
　　人类的每一次进步，技术的每一次发展，都源自对未知世界的探索，探索让我们发现了更大的世界。有人说探索需要好奇心，有人说探索需要想象力，而我觉得，探索最需要的是勇气，面对未知，只有勇敢的人才能迈出第一步。
　　在前端的世界里从来不缺乏有勇气的人，这些勇士们引领着前端技术的不断变革，技术更新了一代又一代，从以jQuery为代表的操作DOM时代，到以Backbone为代表的MVC框架时代，到以AngularJS为代表的MVVM框架时代，再到以React为代表的前端技术的新一代，前端领域发展空前繁荣，颇有百家争鸣、百花齐放的局面，而这一切都源自各位开发者的勇气。
　　如果你对上面提到的名词不了解，或者对当前火热的技术感觉迷茫，没关系，不要担心。其实人的天性就是依赖熟悉的环境，我也曾害怕恐惧，也曾对新技术畏首畏尾，但幸运的是，我突破了自己——曾经陌生的名词，如今都被我驾驭得很好，是勇气给了我力量！
　　关于我和React的故事，要感谢本书的另一位作者——侯策。他是我最志同道合的同事和朋友，他也是一位非常优秀的勇士。他最先研究React，并给我介绍了很多与React相关的知识，我们共同探讨，最开始我们仅仅是基于React做一些比较小的内部系统，现在React已经变成主要的技术栈了，极大提高了我的工作效率。关于我对React的理解，你可以通过阅读本书的内容来了解，因为我已经把我的想法总结好，融入书里了。
　　关于我和这本书的故事，还是要感谢侯策。你之所以能看到这本书，是因为他是一位勇气值爆棚的真正勇士。最开始侯策和我说要写一本书的时候，我是拒绝的，虽然我写了很多博客文章，也阅读了很多书籍，但我从来没有写过书，面对未知我有点犹豫，但是最后我还是决定要试一试，因为这次帮我战胜未知的，除了勇气还有友谊。感谢勇气和友谊，让我又一次挑战了自己，也欢迎大家关注我的博客（yanhaijing.com），那里有更多关于我的故事。
　　写书和写博客还是有很大差别的，整个写作过程是一个挑战和突破的过程，因此书中难免有纰漏，也欢迎大家批评斧正。如果说，面对未知时是勇气让我们迈出了第一步，那么接下来靠的就是坚持了。做任何事情，都是重在开始，贵在坚持。
　　颜海镜
　　2018年6月于北京
　　前言
　　本书内容
　　本书以React技术栈为核心，在介绍React用法的基础上，从源码层面分析了Redux思想，同时着重介绍了服务端渲染和同构应用的架构模式。全书共分8章，其中每一章的主要内容如下。
　　第1章 React与前端
　　本章简单介绍了前端开发的历史发展，以及React的诞生故事，并对本书后面章节要介绍的知识进行了简单概述。
　　第2章 深入浅出React
　　本章围绕组件介绍了很多React相关知识，包括组件的实现方式、组件的抽象、JSX语法、组件的生命周期、组件的属性和状态、如何进行事件交互、组件间如何通信、如何组织组件、组件与DOM的关系等。
　　第3章 Redux应用架构基础
　　本章介绍了Redux基础及用法，包括reducer函数的编写、派发action的设计，以及store状态的更新流程等。在此基础上，还介绍了一个极为重要的概念——函数式编程。本章在数据的不可变性操作上进行了较为深入的实践。同时因为应用开发需求复杂，对于异步处理场景，本章也介绍了Redux中间件的使用方法。
　　第4章 深入理解Redux
　　本章深入剖析了Redux源码及本质，细致讲解了Redux原理，介绍了其实现思想、中间件的设计思想、react-redux库的奥秘，以及在实际开发中的一些最佳实践，帮助读者对Redux有一个更高层面的认知。
　　第5章 揭秘React同构应用
　　本章介绍了基于React开发同构应用的技术实现。前后端的合作和分工、模式的变迁和不同模式的优缺点，将会是一个永恒的话题。React为同构应用打开了一扇窗户。在React同构设计以及Node.js迅速发展的背景下，前端开发完全可以拥有更广阔的空间。
　　第6章 深入理解React技术内幕与生态社区
　　本章对React及Redux中的热点话题进行了探索，介绍了React设计理念和魔法、React组件的组合和复用、React“轮子”开发、简单的React库编写、Redux数据结构优化和角色分析等内容。结合社区中的优秀思想，希望在读者受到启发的同时，也打开一扇React进阶的大门。
　　第7章 单页面应用代码分割
　　本章深入讨论了React技术中的代码分割问题。代码分割不仅仅关系到性能优化，它更是一种技术工程设计的体现，直接影响用户体验。本章围绕这个主题进行了梳理与总结，并通过一个单页面应用实例进行了演示。
　　第8章 React应用性能优化
　　性能涉及方方面面，如前端工程化、浏览器解析和渲染、比较算法等。本章主要介绍了React框架在性能上的优劣、虚拟的DOM思想，以及在开发React应用时需要注意的性能优化环节和手段。同时，优化手段也在与时俱进，不断更新，需要开发者时刻保持学习。

第1章 React与前端 1

1.1 前端简史 1

1.2 React是什么 3

1.3 React家族 4

1.4 本章小结 7

第2章 深入浅出React 8

2.1 组件 8

2.2 组件与系统 11

2.3 神奇的JSX 12

2.4 组件的生命周期 14

2.5 组件的属性和状态 17

2.6 组件和事件 22

2.7 组件通信 24

2.8 组件的抽象与复用 32

2.9 命令式与DOM 38

2.10 本章小结 41

第3章 Redux应用架构基础 42

3.1 Redux究竟是什么 42

3.2 Redux设计哲学 44

3.3 函数式编程和纯函数 48

3.4 Redux基本使用和实践 51

3.5 Redux开发基础实例 58

3.6 reducer编写关键：不可变性 62

3.7 Redux中间件和异步 73

3.8 Redux与React 78

3.9 实现计数器的四种方式 85

3.10 完成一个工程化实例 98

3.11 本章小结 113

第4章 深入理解Redux 114

4.1 Redux源码探索——store的实现 114

4.2 Redux源码探索——combineReducers的实现 118

4.3 dispatch的改造——实现记录日志 121

4.4 dispatch的改造——识别Promise 124

4.5 糅合多种dispatch 126

4.6 Redux源码探索——中间件的秘密 131

4.7 再谈Redux设计思想 136

4.8 react-redux究竟是什么 142

4.9 本章小结 145

第5章 揭秘React同构应用 146

5.1 前后端架构设计和服务端渲染概念 146

5.2 同构应用 150

5.3 使用React和Redux实现同构应用 152

5.4 React 16在服务端渲染上的惊喜 157

5.5 同构项目实战：基于Node.js的“渐进式”流渲染 158

5.6 Next.js设计理念和使用 168

5.7 使用Next.js实现同构应用 172

5.8 本章小结 173

第6章 深入理解React技术内幕与生态社区 184

6.1 React组件的组合和复用——高阶组件 184

6.2 高阶组件和render prop 193

6.3 React组件的组合和复用——Function as Child Component 198

6.4 React组件的组合和复用——Children API 203

6.5 React“轮子”是怎样设计的 209

6.6 setState异步带来的讨论和思考 216

6.7 React组件和React element到底是什么 221

6.8 实现一个简易的React库 227

6.9 引入Redux的必要性及利弊 239

6.10 如何设计并应用Redux connect 243

6.11 使用selector实现最佳实践 248

6.12 Redux store数据结构扁平化及在Twitter中的实践 255

6.13 React state和Redux state的选取原则 266

6.14 本章小结 267

第7章 单页面应用代码分割 269

7.1 React和代码分割 269

7.2 Redux reducer层面代码分割 278

7.3 代码分割工程实例 283

7.4 本章小结 288

第8章 React应用性能优化 289

8.1 React应用性能的秘密 289

8.2 提升React应用性能的建议 295

8.3 使用PureComponent保证开发性能 302

8.4 Redux中间件和Web Worker 308

8.5 本章小结 311