React全栈：Redux+Flux+webpack+Babel整合开发

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

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

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

 本书将从一个传统前端工程师的角度出发，介绍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 和webpack 开发一些应用，而且希望通过一系列的介绍让每个工程师都能站在前端技术的潮头，拥抱变化，学习新的标准和技术，成为新技术的弄潮儿。

 ——张轩

本书面向的读者

 本书适合有一定前端开发经验尤其是有JavaScript 基础的读者，如果你还没有接触过前端开发这个领域，请先阅读前端开发的入门书籍。

本书的代码示例

 你可以在这里下载本书的代码示例：https://github.com/vikingmute/webpack-reactcodes。

本书的代码执行环境

 本书中默认的开发环境是 Node.js 5.0.0，书中介绍到的几个库的版本分别为React@15.0.1、webpack@1.12.14 及Redux@3.2.1，其他如未特别说明的则为最新版本。

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

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

第1 章 现代前端开发 1

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

1．1．1 语言特性 2

1．1．2 使用Babel 10

1．1．3 小结 13

1．2 前端组件化方案 13

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

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

1．2．3 小结 18

1．3 辅助工具 19

1．3．1 包管理器（Package Manager） 19

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

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

第2 章 webpack 28

2．1 webpack 的特点与优势 28

2．1．1 webpack 与RequireJS、browserify 29

2．1．2 模块规范 30

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

2．1．4 构建产物 32

2．1．5 使用 33

2．1．6 webpack 的特色 35

2．1．7 小结 38

2．2 基于webpack 进行开发 38

2．2．1 安装 38

2．2．2 Hello world 39

2．2．3 使用loader 43

2．2．4 配置文件 46

2．2．5 使用plugin 48

2．2．6 实时构建 50

第3 章 初识React 52

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

3．1．1 传统做法 54

3．1．2 全量更新 56

3．1．3 使用React 57

3．1．4 小结 59

3．2 JSX 59

3．2．1 来历 59

3．2．2 语法 60

3．2．3 编译JSX 63

3．2．4 小结 64

3．3 React+webpack 开发环境 64

3．3．1 安装配置Babel 64

3．3．2 安装配置ESLint 65

3．3．3 配置webpack 66

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

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

3．3．6 小结 71

3．4 组件 72

3．4．1 props 属性 73

3．4．2 state 状态 76

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

3．4．4 组合组件 80

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

3．4．6 state 设计原则 82

3．4．7 DOM 操作 83

3．5 Virtual DOM 85

3．5．1 DOM 85

3．5．2 虚拟元素 86

3．5．3 比较差异 88

第4 章 实践React 91

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．2 React 测试工具及方法 108

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

4．2．4 Shallow Render 110

4．2．5 DOM Rendering 114

4．2．6 小结 116

第5 章 Flux 架构及其实现 117

5．1 Flux 117

5．1．1 单向数据流 118

5．1．2 项目结构 119

5．1．3 Dispatcher 和action 119

5．1．4 store 和Dispatcher 122

5．1．5 store 和view 124

5．1．6 Flux 的优缺点 126

5．1．7 Flux 的实现 126

5．2 Redux 126

5．2．1 动机 127

5．2．2 三大定律 127

5．2．3 组成 129

5．2．4 数据流 136

5．2．5 使用middleware 137

第6 章 使用Redux 142

6．1 在React 项目中使用Redux 142

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

6．1．2 react-redux 147

6．1．3 组件组织 152

6．1．4 开发工具 155

6．2 使用Redux 重构Deskmark 157

6．2．1 概要 157

6．2．2 创建与触发action 158

6．2．3 使用middleware 159

6．2．4 实现reducer 163

6．2．5 创建与连接store 165

第7 章 React＋Redux 进阶 168

7．1 常见误解 168

7．1．1 React 的角色 169

7．1．2 JSX 的角色 169

7．1．3 React 的性能 170

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

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

7．2 反模式 173

7．2．1 基于props 得到初始state 173

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 避免不必要的render 188

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

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

7．3．7 小结 203

7．4 社区产物 203

7．4．1 Flux 及其实现 203

7．4．2 Flux Standard Action 204

7．4．3 Ducks 206

7．4．4 GraphQL/Relay 与Falcor 207

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

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