React：引领未来的用户界面开发框架 Facebook前端专家作序||国内众多前端名企专家联合推荐||震撼前端世界有望大一统的技术趋势
- 书籍语言：简体中文
- 下载次数：5566
- 书籍类型：Epub+Txt+pdf+mobi
- 发布日期：2025-09-06
- 连载状态：全集
- 书籍作者：League
- 图书编号：9787121259364
- 运行环境：pc/安卓/iPhone/iPad/Kindle/平板
- 下载
内容简介
2014 年横空出世的由Facebook 推出的开源框架React.js，基于Virtual DOM 重新定义了用户界面的开发方式，彻底革新了大家对前端框架的认识，将PHP 风格的开发方式迁移到客户端应用开发。其优势在于可以与各种类库、框架搭配使用。《React：引领未来的用户界面开发框架》是这一领域的首作，由多位一线专家精心撰写，采用一个全程实例全面介绍和剖析了ReactReact.js 的方方面面，适合广大前端开发者、设计人员，及所有对未来技术趋势感兴趣者阅读。
编辑推荐
身出名门，Fackbook开源巨献，一经推出，瞬间亮瞎全球攻城狮
无论传统网站还是移动开发，尤其跨终端Web，一步跟不上React，就会被远远抛开
以BAT为首的一线国内互联网企业均以快速跟进研发、实践React，下一次求职你就一定会被面到
React极有可能让撕B不止的前端社区迎来和平和宁静，无任何毒副作用、强大的多平台扩展……React新纪元来了
目录
推荐序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
推荐序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
作者简介
本书由一个团队编写而成，这个团队的成员都是一些经验丰富且专注于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 对新技术充满热情，喜欢学习以不同的方式做事。如果你在网上（http://karlmikko.com）找不到他，那他很可能在和妻子攀岩或者在喝咖啡。
Jon Beebe 在Dave Ramsey 的数字开发团队里开发应用，专注于一些面向用户的技术，例如Web 和iOS。在这之前，他开发过PHPWeb 服务，也为Final Cut Pro 和Motion 写过插件。他以能够把艺术和代码结合到一起为乐。他的网名是@bejonbee。他自诩是一个热衷阅读的人，喜欢摄影，并且以超出妻子的日常期望为自己的目标。
Frankie Bagnardi 是一位高级前端工程师，为多种不同的客户端创造用户体验。在业余时间里，他会在StackOverflow（FakeRainBrigand）和IRC（GreenJello）上回答问题，或者开发一些小项目。你可以通过f.bagnardi@gmail.com 联系他。
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 对新技术充满热情，喜欢学习以不同的方式做事。如果你在网上（http://karlmikko.com）找不到他，那他很可能在和妻子攀岩或者在喝咖啡。
Jon Beebe 在Dave Ramsey 的数字开发团队里开发应用，专注于一些面向用户的技术，例如Web 和iOS。在这之前，他开发过PHPWeb 服务，也为Final Cut Pro 和Motion 写过插件。他以能够把艺术和代码结合到一起为乐。他的网名是@bejonbee。他自诩是一个热衷阅读的人，喜欢摄影，并且以超出妻子的日常期望为自己的目标。
Frankie Bagnardi 是一位高级前端工程师，为多种不同的客户端创造用户体验。在业余时间里，他会在StackOverflow（FakeRainBrigand）和IRC（GreenJello）上回答问题，或者开发一些小项目。你可以通过f.bagnardi@gmail.com 联系他。
下载地址
部分章节
推荐序
推荐序1
时光回溯。
2011 年我离开Google 转而加入Facebook，从事移动互联网（Mobile Web）的核心产品开发工作。
随着时间的推移，工作上逐渐取得了许多有意义的巨大进展，同仁们也都深以此为傲。然而不是所有的事情都进展得特别顺利。其中一个很大的问题与挑战就是因为HTML5 的技术限制与性能瓶颈，许多产品的开发工作受到了限制。
2012 年Facebook 公开了一件很多人深有体会却不想说出口的事实，那就是HTML5 之类的Web 技术并未成熟到能够担任产品开发工具重任的程度。在很多方面，使用原生代码（native code）开发仍然是必要的选项。
对于很多包括我在内的Mobile Web 开发者来说，这样的情况是一个让人失望却又不得不接受的事实。
2013 年年初，我离开工作两年多的移动互联网开发部门，转而投入广告部门，从事桌面富客户端（Rich App Client Application）的开发工作。
虽然Mobile Web 的进展不如预期理想，但此时在Desktop Web 方面，事情却有了有意思的变化。
当时我参与的新项目主要是要使用一种叫作React 的新平台技术，将当时广告部门的一个主要产品重构。项目的有趣之处在于，产品的视觉外观与功能将不会也不能有任何变化，但是内部执行的代码将会是以React 打造的。
由于项目的目标为实际上线且对公司营收有重要影响的产品，所以项目的挑战除了在于应用React 这门新技术之外，维持产品本身的稳定当然也是不可妥协的目标。
所幸，项目顺利达标，而同仁们也对于React 这门技术有了更丰富的经验与更强的信心。就连React 本身也快速吸收众人的回馈，快速演进。
我从事Web 前端开发工作已经十年，有幸亲身经历众多重大的技术变革与范式转移。我可以负责任也很喜悦地说，作为一门新生技术，React 及其相关工具对于从事Web 开发的人来说，将会产生巨大且革命性的影响。
虽说React 初始是为了解决Facebook 广告部门在产品开发上遇到的很多实际问题，但实际应用的层面却非常广泛。
2015 年Facebook 也开源了ReactNative，让React 能够在iOS 移动终端执行（对Android 的平台支持预计为2015 年年底）。
由于React 的特殊设计，React 消弥了客户端与服务器端的开发界线。最近的发展则更进一步衍生到Mobile Native App 与其他非传统Web（HTML+ CSS）的执行环境。
无论你是有多年经验的开发者，或者是刚入门的新人，此时选择React 都会是一个很好的选择。
React 可以解决很多传统Web 开发架构碰到的艰难问题，同时由于它是一门新生技术，开发者将更有机会掌握一门强大的开发工具，解决更深入的艰难问题并提升产品开发的质量与境地。
由于React 问世不久，相关的出版物并不多。主要的参考数据与文件都在互联网上。至于中文化的出版物就更难得了。对于有实体文字参考需求的读者来说，本书很值得参考。
作为一本入门书籍，本书提供基本但足够的范例与介绍，着重在实际的代码与操作应用，可以让读者快速学习React 的相关知识与技术，并实际打造可执行的程序。相信对于需要使用React 开发的人来说，这将会是一本不错的入门参考。
必须要补充的是，目前由于React 还在Beta 版本阶段，本书的内容主要是以v0.12 为主。目前公开的最新版本为v0.13，书中提到的API 将会略有差异，细节方面可以在它的官方网站上查询（https://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html）。
Hedger Wang
Facebook 资深前端工程师
过去十年曾先后在Yahoo! 与Google 担任软件工程师
现就职于Facebook，负责React Native 产品的相关开发工作
推荐序2
组件化一直是前端领域的圣杯。我至今依旧记得自己初次接触YUI-Ext 时，被其精致的组件和优雅的设计深深震撼的场景。之后随着ExtJS 的发布，我在很长时间内都痴迷于探索ExtJS 深邃的继承层次与架构，并由此进入了前端行业。
ExtJS 作为一个企业级框架，借鉴了Java 的Swing 设计，同Java 一样有着教科书般的学院风格，也同Swing 一样注定曲高和寡。在快速变化的互联网领域，ExtJS 犹如一条大船行驶在激流中，每一次调头都非常艰难。同时代的不少互联网企业也开源了自己的前端类库，包括YUI、Closure Library、KISSY、Arale 等，它们同样有着不错的组件设计，但思路和ExtJS并无显著不同，只不过更加轻量化。
传统组件化的特点是把组件和原生DOM 节点的渲染割裂起来，要么如ExtJS 一样抛弃原生DOM 节点，要么就在原生DOM 节点渲染后再渲染自定义组件。现代的组件架构鼓励原生DOM 节点和自定义组件的统一渲染融合，比如React 以及未来的Web Components 规范。
React 最为人称道的是，它是一个专注于组件架构的类库。API 很少，理念也很简单，使用React 可以非常快速地写出和原生DOM 标签完美融合的自定义组件（标签），并且能够高效渲染。而想要真正使用好React，我们必须跳出以往的思维，拥抱React 的理念和思想，比如状态、虚拟DOM、组合优于继承、单向数据流等。React 的简单抽象和专注，使得React可以更容易与其他各种技术结合。因为React 的简单抽象，我们终于可以脱离浏览器中充满敌意的DOM 环境，从而使得组件也可以运行在服务器端、Native 客户端等各种底层平台。令人惊奇的是，这种抽象泄漏非常少，必要时可以很方便地跳出React 的抽象而直接操纵DOM 等底层平台。因为React 专注于组件架构，所以模块系统可以直接采用CommonJS，测试框架可以使用Mocha 或Jasmine 等，生态圈则可以直接依托npm，工具可以采用现成的Browserify 或webpack，我们不必受制于任何单一技术，这非常符合Web 的开放本质。在本书中，作者不仅完整地介绍了React 本身的方方面面，用通俗的语言和简洁的例子阐述了React 的开发理念，还介绍了一套基于React 以及业界其他优秀技术的最佳实践，相信读者在看完本书后能够快速将其中的知识应用于项目开发。React 目前处于快速发展时期，在本书发行后，又增加了不少吸引人的新特性，加大了和ES6 的进一步整合，从而进一步减少了需要学习的API，大家在看完本书后可以持续关注React 社区的最新发展动态。值得注意的是，业界基于React 的优秀组件与传统组件相比仍然严重不足，这对我们来说是一个很
好的机会——有机会可以向业界发出中国的声音。积极学习业界的先进技术，未来我们一定能在前端类库领域创造出让业界称赞的东西。
何一鸣（承玉）
蚂蚁金服技术专家
前KISSY 核心开发者，现React 爱好者
推荐序3
React 是一种革命性的UI 组件开发思路。
在此之前，我们所见到的JavaScript 框架开发思路几乎是同质的。框架为开发者提供一套组件库，业务开发基于组件库提供的组件来进行就可以了。
而在UI 组件架构里，有几个特点需要注意：一是越靠近用户端变化越快，用枚举组件的思路在高速迭代快速变化的互联网中开发，将会使UI 组件库逐渐变得臃肿和难以维护。二是组件开发不再是五六年前那样一穷二白的初始状态，现今行业里组件百花齐放，可选面非常广，即使当下找不到非常匹配的组件，进行自研的成本也不高。三是UI 组件受具体业务场景的约束。
因此，各大互联网公司在组件上都尽可能地采取自研或统一组织组件库。而组件库在公司级别难抽象，对整体技术的挑战比较大，且收效不确定。于是只能将组件场景定位到更具体的某一类型的业务线再进行抽象。从而让组件库变得轻量、灵活。
开发架构的理想态是“同构”。用相同的内部机制与结构将开发变得透明且测试可控。这在React 里表现得很明显。它的设计非常大胆，一开始就没有将枚举组件功能作为重点，而是以“同构”的理想架构为起点——将原本的DOM 操作接管，提出Virtual DOM、单向数据流，用很少的接口覆盖在组件开发的生命周期上，采取声明式的语法等。实现了一个纯粹的组件“引擎”。
另一方面，React 的思路也可作为连接“异构端”的组件入口。现在，用React + native 就可以实现React- native；用React + canvas 就可以实现一套基于canvas 的高性能的Web UI 组件；最近，我还尝试了React + WebComponents，将两者的优势进行融合。可见，React 的思路为开发创造了非常大的想象空间。
本书内容围绕示例展开，书中还涵盖了React 的周边信息，为读者提供了较为全面和丰富的React 讲解。通过阅读本书，读者能够学会如何将React 运用到实际开发中去。另外，我建议大家不仅要学习React 的应用如何实现组件，更重要的是通过书中的实例理解React 的设计思路。可以预见，React 未来将会影响整个用户端UI 组件的开发。希望能有更多的人了解React 的开发思路，大家携手共建React 的组件生态。
刘平川（rank）
现美团网架构师，React 爱好者
前百度FEX 创立者及负责人
前言
React 是什么，为什么要使用它
React 是Facebook 内部的一个JavaScript 类库，已于2013 年开源，可用于创建Web 用户交互界面。它引入了一种新的方式来处理浏览器DOM。那些需要手动更新DOM、费力地记录每一个状态的日子一去不复返了——这种老旧的方式
推荐序1
时光回溯。
2011 年我离开Google 转而加入Facebook，从事移动互联网（Mobile Web）的核心产品开发工作。
随着时间的推移，工作上逐渐取得了许多有意义的巨大进展，同仁们也都深以此为傲。然而不是所有的事情都进展得特别顺利。其中一个很大的问题与挑战就是因为HTML5 的技术限制与性能瓶颈，许多产品的开发工作受到了限制。
2012 年Facebook 公开了一件很多人深有体会却不想说出口的事实，那就是HTML5 之类的Web 技术并未成熟到能够担任产品开发工具重任的程度。在很多方面，使用原生代码（native code）开发仍然是必要的选项。
对于很多包括我在内的Mobile Web 开发者来说，这样的情况是一个让人失望却又不得不接受的事实。
2013 年年初，我离开工作两年多的移动互联网开发部门，转而投入广告部门，从事桌面富客户端（Rich App Client Application）的开发工作。
虽然Mobile Web 的进展不如预期理想，但此时在Desktop Web 方面，事情却有了有意思的变化。
当时我参与的新项目主要是要使用一种叫作React 的新平台技术，将当时广告部门的一个主要产品重构。项目的有趣之处在于，产品的视觉外观与功能将不会也不能有任何变化，但是内部执行的代码将会是以React 打造的。
由于项目的目标为实际上线且对公司营收有重要影响的产品，所以项目的挑战除了在于应用React 这门新技术之外，维持产品本身的稳定当然也是不可妥协的目标。
所幸，项目顺利达标，而同仁们也对于React 这门技术有了更丰富的经验与更强的信心。就连React 本身也快速吸收众人的回馈，快速演进。
我从事Web 前端开发工作已经十年，有幸亲身经历众多重大的技术变革与范式转移。我可以负责任也很喜悦地说，作为一门新生技术，React 及其相关工具对于从事Web 开发的人来说，将会产生巨大且革命性的影响。
虽说React 初始是为了解决Facebook 广告部门在产品开发上遇到的很多实际问题，但实际应用的层面却非常广泛。
2015 年Facebook 也开源了ReactNative，让React 能够在iOS 移动终端执行（对Android 的平台支持预计为2015 年年底）。
由于React 的特殊设计，React 消弥了客户端与服务器端的开发界线。最近的发展则更进一步衍生到Mobile Native App 与其他非传统Web（HTML+ CSS）的执行环境。
无论你是有多年经验的开发者，或者是刚入门的新人，此时选择React 都会是一个很好的选择。
React 可以解决很多传统Web 开发架构碰到的艰难问题，同时由于它是一门新生技术，开发者将更有机会掌握一门强大的开发工具，解决更深入的艰难问题并提升产品开发的质量与境地。
由于React 问世不久，相关的出版物并不多。主要的参考数据与文件都在互联网上。至于中文化的出版物就更难得了。对于有实体文字参考需求的读者来说，本书很值得参考。
作为一本入门书籍，本书提供基本但足够的范例与介绍，着重在实际的代码与操作应用，可以让读者快速学习React 的相关知识与技术，并实际打造可执行的程序。相信对于需要使用React 开发的人来说，这将会是一本不错的入门参考。
必须要补充的是，目前由于React 还在Beta 版本阶段，本书的内容主要是以v0.12 为主。目前公开的最新版本为v0.13，书中提到的API 将会略有差异，细节方面可以在它的官方网站上查询（https://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html）。
Hedger Wang
Facebook 资深前端工程师
过去十年曾先后在Yahoo! 与Google 担任软件工程师
现就职于Facebook，负责React Native 产品的相关开发工作
推荐序2
组件化一直是前端领域的圣杯。我至今依旧记得自己初次接触YUI-Ext 时，被其精致的组件和优雅的设计深深震撼的场景。之后随着ExtJS 的发布，我在很长时间内都痴迷于探索ExtJS 深邃的继承层次与架构，并由此进入了前端行业。
ExtJS 作为一个企业级框架，借鉴了Java 的Swing 设计，同Java 一样有着教科书般的学院风格，也同Swing 一样注定曲高和寡。在快速变化的互联网领域，ExtJS 犹如一条大船行驶在激流中，每一次调头都非常艰难。同时代的不少互联网企业也开源了自己的前端类库，包括YUI、Closure Library、KISSY、Arale 等，它们同样有着不错的组件设计，但思路和ExtJS并无显著不同，只不过更加轻量化。
传统组件化的特点是把组件和原生DOM 节点的渲染割裂起来，要么如ExtJS 一样抛弃原生DOM 节点，要么就在原生DOM 节点渲染后再渲染自定义组件。现代的组件架构鼓励原生DOM 节点和自定义组件的统一渲染融合，比如React 以及未来的Web Components 规范。
React 最为人称道的是，它是一个专注于组件架构的类库。API 很少，理念也很简单，使用React 可以非常快速地写出和原生DOM 标签完美融合的自定义组件（标签），并且能够高效渲染。而想要真正使用好React，我们必须跳出以往的思维，拥抱React 的理念和思想，比如状态、虚拟DOM、组合优于继承、单向数据流等。React 的简单抽象和专注，使得React可以更容易与其他各种技术结合。因为React 的简单抽象，我们终于可以脱离浏览器中充满敌意的DOM 环境，从而使得组件也可以运行在服务器端、Native 客户端等各种底层平台。令人惊奇的是，这种抽象泄漏非常少，必要时可以很方便地跳出React 的抽象而直接操纵DOM 等底层平台。因为React 专注于组件架构，所以模块系统可以直接采用CommonJS，测试框架可以使用Mocha 或Jasmine 等，生态圈则可以直接依托npm，工具可以采用现成的Browserify 或webpack，我们不必受制于任何单一技术，这非常符合Web 的开放本质。在本书中，作者不仅完整地介绍了React 本身的方方面面，用通俗的语言和简洁的例子阐述了React 的开发理念，还介绍了一套基于React 以及业界其他优秀技术的最佳实践，相信读者在看完本书后能够快速将其中的知识应用于项目开发。React 目前处于快速发展时期，在本书发行后，又增加了不少吸引人的新特性，加大了和ES6 的进一步整合，从而进一步减少了需要学习的API，大家在看完本书后可以持续关注React 社区的最新发展动态。值得注意的是，业界基于React 的优秀组件与传统组件相比仍然严重不足，这对我们来说是一个很
好的机会——有机会可以向业界发出中国的声音。积极学习业界的先进技术，未来我们一定能在前端类库领域创造出让业界称赞的东西。
何一鸣（承玉）
蚂蚁金服技术专家
前KISSY 核心开发者，现React 爱好者
推荐序3
React 是一种革命性的UI 组件开发思路。
在此之前，我们所见到的JavaScript 框架开发思路几乎是同质的。框架为开发者提供一套组件库，业务开发基于组件库提供的组件来进行就可以了。
而在UI 组件架构里，有几个特点需要注意：一是越靠近用户端变化越快，用枚举组件的思路在高速迭代快速变化的互联网中开发，将会使UI 组件库逐渐变得臃肿和难以维护。二是组件开发不再是五六年前那样一穷二白的初始状态，现今行业里组件百花齐放，可选面非常广，即使当下找不到非常匹配的组件，进行自研的成本也不高。三是UI 组件受具体业务场景的约束。
因此，各大互联网公司在组件上都尽可能地采取自研或统一组织组件库。而组件库在公司级别难抽象，对整体技术的挑战比较大，且收效不确定。于是只能将组件场景定位到更具体的某一类型的业务线再进行抽象。从而让组件库变得轻量、灵活。
开发架构的理想态是“同构”。用相同的内部机制与结构将开发变得透明且测试可控。这在React 里表现得很明显。它的设计非常大胆，一开始就没有将枚举组件功能作为重点，而是以“同构”的理想架构为起点——将原本的DOM 操作接管，提出Virtual DOM、单向数据流，用很少的接口覆盖在组件开发的生命周期上，采取声明式的语法等。实现了一个纯粹的组件“引擎”。
另一方面，React 的思路也可作为连接“异构端”的组件入口。现在，用React + native 就可以实现React- native；用React + canvas 就可以实现一套基于canvas 的高性能的Web UI 组件；最近，我还尝试了React + WebComponents，将两者的优势进行融合。可见，React 的思路为开发创造了非常大的想象空间。
本书内容围绕示例展开，书中还涵盖了React 的周边信息，为读者提供了较为全面和丰富的React 讲解。通过阅读本书，读者能够学会如何将React 运用到实际开发中去。另外，我建议大家不仅要学习React 的应用如何实现组件，更重要的是通过书中的实例理解React 的设计思路。可以预见，React 未来将会影响整个用户端UI 组件的开发。希望能有更多的人了解React 的开发思路，大家携手共建React 的组件生态。
刘平川（rank）
现美团网架构师，React 爱好者
前百度FEX 创立者及负责人
前言
React 是什么，为什么要使用它
React 是Facebook 内部的一个JavaScript 类库，已于2013 年开源，可用于创建Web 用户交互界面。它引入了一种新的方式来处理浏览器DOM。那些需要手动更新DOM、费力地记录每一个状态的日子一去不复返了——这种老旧的方式