电子工业出版社-网上书店

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

目 录
第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

对一个前端工程师来说，这是最坏的时代，也是最好的时代。
  在这样的领域里，每一年都不会风平浪静。如果说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开发

张轩，前端开发工程师。曾经在百度、携程就职，目前在苹果公司担任前端开发工程师。拥有丰富的Web开发经验，喜欢追寻新技术，在GitHub上关注各种有趣的项目，同时致力于前端工程化，并且有大型SPA项目的架构及开发经验。他同时是一名业余文学爱好者，在工作之余写一些短篇小说。__eol____eol__杨寒星，前端开发工程师。曾就职于爱奇艺、百度，目前在七牛云负责前端开发与架构设计。对编写优美的代码、构建影响深远的系统感兴趣；专注于现代前端工程化方案搭建及大规模SPA的架构设计，对基于React体系的前端开发有着丰富的实践经验。

√ React带来Virtual DOM，填平PC与移动鸿沟，前端从此迈向全端。__eol__√ Modern F2E时代开启，ES2015+Redux+Flux+webpack+Babel技术栈来袭。 __eol__√ 全栈明星非React莫属，工程方法、工程化工具、框架使用，尽在本书。__eol__√ 实战整合全新语言标准、编程范式、框架组件、自动化工作流。

本书配套资源下载

对不起，暂无音视频资源！

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