《React全栈：Redux+Flux+webpack+Babel》

编辑推荐

√React带来VirtualDOM，填平PC与移动鸿沟，前端从此迈向全端。

√ModernF2E时代开启，ES2015+Redux+Flux+webpack+Babel技术栈来袭。

√全栈明星非React莫属，工程方法、工程化工具、框架使用，尽在《React全栈：Redux+Flux+webpack+Babel整合开发》。

√实战整合全新语言标准、编程范式、框架组件、自动化工作流。

内容简介

《React全栈：Redux+Flux+webpack+Babel整合开发》从现代前端开发的标准、趋势和常用工具入手，由此引出了优秀的构建工具webpack和JavaScript库React，之后用一系列的实例来阐述两者的特色、概念和基本使用方法。随着应用复杂度的增加，进而介绍了Flux和Redux两种架构思想，并且使用Redux对现有程序进行改造，最后介绍了在开发过程中出现的反模式和性能优化方法。

作者简介

张轩，前端开发工程师。曾经在百度、携程就职，目前在苹果公司担任前端开发工程师。拥有丰富的Web开发经验，喜欢追寻新技术，在GitHub上关注各种有趣的项目，同时致力于前端工程化，并且有大型SPA项目的架构及开发经验。他同时是一名业余文学爱好者，在工作之余写一些短篇小说。

杨寒星，前端开发工程师。曾就职于爱奇艺、百度，目前在七牛云负责前端开发与架构设计。对编写优美的代码、构建影响深远的系统感兴趣；专注于现代前端工程化方案搭建及大规模SPA的架构设计，对基于React体系的前端开发有着丰富的实践经验。

目录

第1章现代前端开发1

1．1ES6――新一代的JavaScript标准1

1．1．1语言特性2

1．1．2使用Babel10

1．1．3小结13

1．2前端组件化方案13

1．2．1JavaScript模块化方案14

1．2．2前端的模块化和组件化16

1．2．3小结18

1．3辅助工具19

1．3．1包管理器（PackageManager）19

1．3．2任务流工具（TaskRunner）23

1．3．3模块打包工具（Bundler）26

第2章webpack28

2．1webpack的特点与优势28

2．1．1webpack与RequireJS、browserify29

2．1．2模块规范30

2．1．3非javascript模块支持31

2．1．4构建产物32

2．1．5使用33

2．1．6webpack的特色35

2．1．7小结38

2．2基于webpack进行开发38

2．2．1安装38

2．2．2Helloworld39

2．2．3使用loader43

2．2．4配置文件46

2．2．5使用plugin48

2．2．6实时构建50

第3章初识React52

3．1使用React与传统前端开发的比较54

3．1．1传统做法54

3．1．2全量更新56

3．1．3使用React57

3．1．4小结59

3．2JSX59

3．2．1来历59

3．2．2语法60

3．2．3编译JSX63

3．2．4小结64

3．3React+webpack开发环境64

3．3．1安装配置Babel64

3．3．2安装配置ESLint65

3．3．3配置webpack66

3．3．4添加测试页面68

3．3．5添加组件热加载（HMR）功能70

3．3．6小结71

3．4组件72

3．4．1props属性73

3．4．2state状态76

3．4．3组件生命周期78

3．4．4组合组件80

3．4．5无状态函数式组件82

3．4．6state设计原则82

3．4．7DOM操作83

3．5VirtualDOM85

3．5．1DOM85

3．5．2虚拟元素86

3．5．3比较差异88

第4章实践React91

4．1开发项目91

4．1．1将原型图分割成不同组件92

4．1．2创造每个静态组件93

4．1．3组合静态组件96

4．1．4添加state的结构99

4．1．5组件交互设计100

4．1．6组合成为最终版本102

4．1．7小结105

4．2测试106

4．2．1通用测试工具简介106

4．2．2React测试工具及方法108

4．2．3配置测试环境109

4．2．4ShallowRender110

4．2．5DOMRendering114

4．2．6小结116

第5章Flux架构及其实现117

5．1Flux117

5．1．1单向数据流118

5．1．2项目结构119

5．1．3Dispatcher和action119

5．1．4store和Dispatcher122

5．1．5store和view124

5．1．6Flux的优缺点126

5．1．7Flux的实现126

5．2Redux126

5．2．1动机127

5．2．2三大定律127

5．2．3组成129

5．2．4数据流136

5．2．5使用middleware137

第6章使用Redux142

6．1在React项目中使用Redux142

6．1．1如何在React项目中使用Redux142

6．1．2react-redux147

6．1．3组件组织152

6．1．4开发工具155

6．2使用Redux重构Deskmark157

6．2．1概要157

6．2．2创建与触发action158

6．2．3使用middleware159

6．2．4实现reducer163

6．2．5创建与连接store165

第7章React＋Redux进阶168

7．1常见误解168

7．1．1React的角色169

7．1．2JSX的角色169

7．1．3React的性能170

7．1．4“短路”式性能优化171

7．1．5无状态函数式组件的性能172

7．2反模式173

7．2．1基于props得到初始state173

7．2．2使用refs获取子组件176

7．2．3冗余事实178

7．2．4组件的隐式数据源180

7．2．5不被预期的副作用182

7．3性能优化183

7．3．1优化原则183

7．3．2性能分析184

7．3．3生产环境版本187

7．3．4避免不必要的render188

7．3．5合理拆分组件199

7．3．6合理使用组件内部state200

7．3．7小结203

7．4社区产物203

7．4．1Flux及其实现203

7．4．2FluxStandardAction204

7．4．3Ducks206

7．4．4GraphQL/Relay与Falcor207

7．4．5副作用的处理209

前言/序言

对一个前端工程师来说，这是最坏的时代，也是最好的时代。

在这样的领域里，每一年都不会风平浪静。如果说2014年是属于MVVM，属于Angular的，那么2015年称为React元年并不为过。开发团队的不断完善以及React社区井喷式的发展让这个诞生于2013年的框架及其生态趋于成熟（就在不久前，React官方宣布将在版本号0.14.7后直接使用版本号15.0.0），大量团队在生产环境中的实践经验也让引入React不再是一件需要瞻前顾后反复调研的事情，如果React适合你，那么现在就可以放心地使用了。

可是对于很多还没有深入实践过React开发的工程师来说，React到底做了什么？React适合什么样的场景？又应该如何投入使用？在具体业务逻辑的实现上，怎样才是最佳的实践？这些都是需要去了解与思考的问题。

《React全栈：Redux+Flux+webpack+Babel整合开发》将从一个传统前端工程师的角度出发，介绍React产生的背景及其架构应用，并结合一些由浅入深的例子帮助读者掌握基于React的Web前端开发方法。

——杨寒星

前端开发是一个充满变化的领域，它的发展速度快得惊人。各种各样的新技术、新标准层出不穷，GitHub上最火的语言是JavaScript，最大的包管理器是npm。新的流行框架日新月异，几年前的那些先驱者还是工程师口中津津乐道的宠儿，比如YUI、Mootools、jQuery等，今天已经不再那么流行，曾经名噪一时的Backbone框架，现在也渐渐褪去热度，继往开来的Angular、Vue.js、Ember等MVVM框架竞相登场，再加上当红的新宠React.js大行其道，让好多工程师仿佛迷失在了大潮中。

前端开发是一个新兴的行业。几年前，被称作重构工程师的我们还都在对着Photoshop切图，把一些jQuery插件复制来复制去，完成一些炫酷的幻灯图特效，不断地处理着很多IE浏览器的怪异Bug。这些功力其实到现在还能满足大部分的Web开发，完成大部分的项目。我们不妨把它称为“古典时代”，它影响深远，但是最终会慢慢远去。

在当前这个潮流下，很多工程师会抛出这样的言论：

学习一些新的工具、框架有什么用？业界发展得这么快，等我学会了这些，它也许已经“寿终正寝”了。天天跟风一样地追求各种框架，学会了也是迷茫，这些框架没有用武之地。旁门左道，天天布道没有用的东西，伪前端。

随着技术的进化、移动应用的飞速发展，一个前端工程师的职责不像原来那样只要把图转换成网页那么简单。如今产生了各种类型的新名词——Hybird应用、全端工程师、SPA等，各有其特定的应用场景。任何框架的发明和创造都有它们一定的历史原因，只有解决了需求的痛点，才能让工程师更快地解决难题。在我们学习的过程中，可以发现它背后的思想和解决方案，进而更好地充实自己。做技术的人最重要的就是保持开放的态度，有一颗好奇心，持续不断地学习。

在前端开发中占最重要部分的JavaScript，也随着这些框架在慢慢进化着，原来令人不断诟病的缺点正在被标准制定者慢慢修补，新的特性不断浮出水面。前端工程师正处在发展最迅速的时代，这应该是一个让人兴奋的时代，犹如工业革命一样，每个工程师都见证着一场伟大的前端革命。

《React全栈：Redux+Flux+webpack+Babel整合开发》不仅讲述了怎样使用React和webpack开发一些应用，而且希望通过一系列的介绍让每个工程师都能站在前端技术的潮头，拥抱变化，学习新的标准和技术，成为新技术的弄潮儿。

——张轩

《React全栈：Redux+Flux+webpack+Babel整合开发》面向的读者

《React全栈：Redux+Flux+webpack+Babel整合开发》适合有一定前端开发经验尤其是有JavaScript基础的读者，如果你还没有接触过前端开发这个领域，请先阅读前端开发的入门书籍。

《React全栈：Redux+Flux+webpack+Babel整合开发》的代码示例

你可以在这里下载《React全栈：Redux+Flux+webpack+Babel整合开发》的代码示例：https://github.com/vikingmute/webpack-reactcodes。

《React全栈：Redux+Flux+webpack+Babel整合开发》的代码执行环境

《React全栈：Redux+Flux+webpack+Babel整合开发》中默认的开发环境是Node.js5.0.0，书中介绍到的几个库的版本分别为React@15.0.1、webpack@1.12.14及Redux@3.2.1，其他如未特别说明的则为最新版本。