React：引领未来的用户界面开发框架

身出名门，Fackbook开源巨献，一经推出，瞬间亮瞎全球攻城狮
无论传统网站还是移动开发，尤其跨终端Web，一步跟不上React，就会被远远抛开
以BAT为首的一线国内互联网企业均以快速跟进研发、实践React，下一次求职你就一定会被面到
React极有可能让撕B不止的前端社区迎来和平和宁静，无任何毒副作用、强大的多平台扩展……React新纪元来了

2014 年横空出世的由Facebook 推出的开源框架React.js，基于Virtual DOM 重新定义了用户界面的开发方式，彻底革新了大家对前端框架的认识，将PHP 风格的开发方式迁移到客户端应用开发。其优势在于可以与各种类库、框架搭配使用。本书是这一领域的首作，由多位一线专家精心撰写，采用一个全程实例全面介绍和剖析了React.js 的方方面面，适合广大前端开发者、设计人员，及所有对未来技术趋势感兴趣者阅读。

《React：引领未来的用户界面开发框架》由一个团队编写而成，这个团队的成员都是一些经验丰富且专注于JavaScript 的开发者。
Tom Hallett 是一位高级Ruby 和JavaScript 工程师，在Tout.com 工作（Tout.com 是一个实时视频平台，办公地点在旧金山）。他是jasmine-react 的作者，jasmine-react 是一个开源的类库，旨在帮助开发者使用测试框架Jasmine 测试React 应用程序。在Twitter（@tommyhallett）和Github（@tommyh）上都可以找到他。他的爱好是打水球，以及与妻子和儿子待在一起。
Richard Feldman 是旧金山教育科技公司NoRedInk 的前端工程师。他是一个函数式编程爱好者，会议发言人，还是seamlessimmutable的作者。seamless-immutable 是一个开源类库，可以提供不可变的数据结构，向后兼容普通的JavaScript 对象和数组。Richard 在Twitter 和Github 上都叫@rtfeldman。
Simon H jberg 是一个高级UI 工程师，在罗德岛普罗维登斯市的Swipely 公司工作。他是普罗维登斯市线下JS 见面会的核心组织者，之前还是波士顿创业学院的JavaScript 讲师。他一直在使用JavaScript 开发功能性的用户界面，也会开发一些像cssarrowplease.com 这样的业余项目。Simon 的Twitter 是@shojberg。
Karl Mikkelsen 是LockedOn 的一位高级PHP 和JavaScript 工程师，工作是开发外观漂亮且功能强大的房地产软件。Karl 对新技术充满热情，喜欢学习以不同的方式做事。如果你在网上找不到他，那他很可能在和妻子攀岩或者在喝咖啡。
Jon Beebe 在Dave Ramsey 的数字开发团队里开发应用，专注于一些面向用户的技术，例如Web 和iOS。在这之前，他开发过PHPWeb 服务，也为Final Cut Pro 和Motion 写过插件。他以能够把艺术和代码结合到一起为乐。他的网名是@bejonbee。他自诩是一个热衷阅读的人，喜欢摄影，并且以超出妻子的日常期望为自己的目标。
Frankie Bagnardi 是一位高级前端工程师，为多种不同的客户端创造用户体验。在业余时间里，他会在StackOverflow（FakeRainBrigand）和IRC（GreenJello）上回答问题，或者开发一些小项目。你可以 联系他。

★在前端社区里程碑式的2004年，Gmail带来了服务端渲染网页之外的原生应用级别体验，让native like网站成为开发者追逐的方向，Backbone、Angular等开源框架应运而生，但新的性能及SEO问题接踵而来，Twitter甚至重回服务器渲染方案。不同于其他开源框架，React.js 并不会引入任何新的问题。几乎没有犹豫，我们开始使用React.js来重构Strikingly。2014年，又是里程碑式的一年。
——郭达峰，Strikingly 创始人

★直到React Native发布，我才开始深入了解React。接触后不禁赞叹React基于Virtual DOM抽象的多平台扩展能力。更让人震惊的是，其发布时就已经在尝试这一想法（React Native、Canvas）。React很可能是引领时代的一个框架，很期待它的持续成长。
——鬼道/徐凯，天猫技术专家，《跨终端Web》作者

★在前端框架和库百家争鸣的时代，React试图以独有思路来解决前端业务亟需解决的问题——JSX、Virtual DOM与Flux等都以革命性的创新去应对UI状态的变化及数据维护的复杂度，后续衍生的React Native更是让人眼前一亮。

★React可想象的空间很大，让我们拭目以待。
——梁超，奇舞团导航新闻浏览器电商负责人

★较早用H5开发移动端应用的Facebook，因运行效率而放弃基于H5和JS的客户端。在踩过这个大坑之后，React技术一出世就备受瞩目，风头已全面盖过所有同类技术。对于正在或想要做移动应用开发的人来说，React绝对是一门值得深入研究的技术。
—— 大漠穷秋 ，《用AngularJS开发下一代Web应用》译者

推荐序1 iii
推荐序2 v
推荐序3 vii
前言 ix
第1 章React 简介 1
背景介绍1
本书概览3
Component 的创建和复合3
进阶4
React 工具5
React 实践5
第2 章JSX 6
什么是JSX 7
使用JSX 的好处7
更加熟悉7
更加语义化8
更加直观8
抽象化9
关注点分离9
复合组件10
定义一个自定义组件10
使用动态值11
子节点12
JSX 与HTML 有何不同13
属性13
条件判断14
非DOM 属性15
事件17
注释18
特殊属性19
样式19
没有JSX 的React 19
创建React 元素20
简写21
延伸阅读及参考引用21
JSX 官方规范22
第3 章组件的生命周期 23
生命周期方法23
实例化23
存在期24
销毁＆ 清理期24
实例化24
getDefaultProps 24
getInitialState 25
componentWillMount 25
render 25
componentDidMount 25
存在期26
componentWillReceiveProps 26
shouldComponentUpdate 27
componentWillUpdate 28
componentDidUpdate 28
销毁＆ 清理期28
componentWillUnmount 28
反模式：把计算后的值赋给state 28
总结30
第4 章数据流 31
Props 31
PropTypes 33
getDefaultProps 33
State 34
放在state 和props 的各是哪些部分35
总结35
第5 章事件处理 36
绑定事件处理器36
事件和状态37
根据状态进行渲染38
更新状态40
事件对象42
总结43
第6 章组件的复合 44
扩展HTML 44
组件复合的例子45
组装HTML 45
追踪状态47
整合到父组件当中48
父组件、子组件关系50
总结52
第7 章mixin 53
什么是mixin 53
总结56
第8 章DOM 操作 57
访问受控的DOM 节点57
整合非React 类库59
侵入式插件61
总结63
第9 章表单 64
约束的组件65
约束组件66
表单事件68
Label 68
文本框和Select 69
复选框和单选框71
表单元素的name 属性73
多个表单元素与change 处理器75
自定义表单组件79
Focus 83
可用性83
把要求传达清楚83
不断地反馈84
迅速响应84
符合用户的预期84
可访问85
减少用户的输入85
总结86
第10 章动画 87
CSS 渐变组87
给渐变class 添加样式88
渐变生命周期89
使用渐变组的隐患89
间隔渲染89
使用requestAnimationFrame 实现间隔渲染90
使用setTimeout 实现间隔渲染91
总结92
第11 章性能优化 93
shouldComponentUpdate 93
不可变性辅助插件95
深入调查拖慢你应用的部分96
键（key） 97
总结98
第12 章服务端渲染 99
渲染函数100
React．renderToString 100
React．renderToStaticMarkup 100
用React．renderToString 还是用React．renderToStaticMarkup 101
服务端组件生命周期102
设计组件102
异步状态104
同构路由106
单例、实例及上下文107
总结107
第13 章周边类库 108
Jest 108
设置109
自动模拟依赖109
手动模拟依赖111
Immutable．js 113
Flux 114
总结115
第14 章开发工具 116
构建工具116
Browserify 117
建立一个Browserify 项目117
对代码做出修改118
Watchify 119
构建119
Webpack 119
Webpack 与React 120
调试工具122
基础工具123
总结124
第15 章测试 125
上手125
测试的类型126
工具126
第一个测试用例：render 测试127
模拟组件132
函数监视138
监视函数被调用141
模拟事件146
测试中的组件查找器149
mixin 测试152
直接测试mixin 153
把mixin 包含在虚拟组件中进行测试156
共享行为的用例159
渲染到＜body＞ 中164
服务端测试168
浏览器自动化测试174
启动服务器179
总结180
第16 章架构模式 181
路由182
Backbone．Router 182
Aviator 183
react-router 185
Om (ClojureScript) 186
Flux 187
数据流187
Flux 各个部分188
Dispatcher 188
Action 189
Store 190
控制视图191
管理多个Store 192
更新Dispatcher 192
注册依赖行为193
总结194
第17 章其他使用场景 195
桌面应用195
游戏197
电子邮件202
绘图208
总结210

React 是什么，为什么要使用它
React 是Facebook 内部的一个JavaScript 类库，已于2013 年开源，可用于创建Web 用户交互界面。它引入了一种新的方式来处理浏览器DOM。那些需要手动更新DOM、费力地记录每一个状态的日子一去不复返了——这种老旧的方式既不具备扩展性，又很难加入新的功能，就算可以，也是冒着很大的风险。React 使用很新颖的方式解决了这些问题。你只需声明式地定义各个时间点的用户界面，而无须关心在数据变化时需要更新哪一部分DOM。在任何时间点，React 都能够以最小的DOM 修改来更新整个应用程序。
本书内容
React 引入了一些激动人心的新概念，向现有的一些最佳实践发起了挑战。本书将会带领你学习这些概念，帮助你理解它们的优势，创建具备高扩展性的单页面应用（SPA）。
React 把主要的注意力放在了应用的“视图” 部分，没有限定与服务端交互和代码组织的方式。在本书中，我们将介绍目前的一些最佳实践及配套工具，帮助你使用React 构建一个完整的应用。
本书面向的读者
为了更好地掌握本书的内容，你需要有JavaScript 和HTML 相关开发经验。倘若你做过SPA应用（什么框架不重要，Backbone.js、Angular.js 或者Ember.js 都可以）那更好，但这不是必需的。
源码和示例
一些来自示例项目问卷制作工具的代码片段会贯穿在整本书中。你可以找到完整的代码。
编写过程
我们把本书当作一本虚拟的电子书编写，用一到两个月的时间快速迭代。这种方式有助于创建新鲜及时的内容，而传统书籍往往无法覆盖最新的趋势和技术。
作者
本书由一个团队编写而成，这个团队的成员都是一些经验丰富且专注于JavaScript 的开发者。
Tom Hallett 是一位高级Ruby 和JavaScript 工程师，在Tout.com 工作（Tout.com 是一个实时视频平台，办公地点在旧金山）。他是jasmine-react 的作者，jasmine-react 是一个开源的类库，旨在帮助开发者使用测试框架Jasmine 测试React 应用程序。在Twitter（@tommyhallett）和Github（@tommyh）上都可以找到他。他的爱好是打水球，以及与妻子和儿子待在一起。
Richard Feldman 是旧金山教育科技公司NoRedInk 的前端工程师。他是一个函数式编程爱好者，会议发言人，还是seamlessimmutable的作者。seamless-immutable 是一个开源类库，可以提供不可变的数据结构，向后兼容普通的JavaScript 对象和数组。Richard 在Twitter 和Github 上都叫@rtfeldman。
Simon H?jberg 是一个高级UI 工程师，在罗德岛普罗维登斯市的Swipely 公司工作。他是普罗维登斯市线下JS 见面会的核心组织者，之前还是波士顿创业学院的JavaScript 讲师。他一直在使用JavaScript 开发功能性的用户界面，也会开发一些像cssarrowplease.com 这样的业余项目。Simon 的Twitter 是@shojberg。
Karl Mikkelsen 是LockedOn 的一位高级PHP 和JavaScript 工程师，工作是开发外观漂亮且功能强大的房地产软件。Karl 对新技术充满热情，喜欢学习以不同的方式做事。如果你在网上找不到他，那他很可能在和妻子攀岩或者在喝咖啡。
Jon Beebe 在Dave Ramsey 的数字开发团队里开发应用，专注于一些面向用户的技术，例如Web 和iOS。在这之前，他开发过PHP Web 服务，也为Final Cut Pro 和Motion 写过插件。他以能够把艺术和代码结合到一起为乐。他的网名是@bejonbee。他自诩是一个热衷阅读的人，喜欢摄影，并且以超出妻子的日常期望为自己的目标。
Frankie Bagnardi 是一位高级前端工程师，为多种不同的客户端创造用户体验。在业余时间里，他会在StackOverflow（FakeRainBrigand）和IRC（GreenJello）上回答问题，或者开发一些小项目。你可以通过f.bagnardi@gmail.com 联系他。