Facebook 的开源框架 React.js，基于 Virtual DOM 重新定义了用户界面的开发方式，彻底革新了大家对前端框架的认识，将PHP风格的开发方式迁移到客户端应用开发。其优势在于可以与各种类库、框架搭配使用。本书由多位一线专家精心撰写，采用全程实例介绍和剖析了 React.js 的方方面面，适合广大前端开发者、设计人员，以及所有对未来技术趋势感兴趣者阅读。本书前版作为 React 首作推出之后，React 生态继续蓬勃发展，技术及社区都在不断推陈出新。本书诸位专家作者适时推出新版，全面更新示例，用 ES6 重写代码，摒弃社区弃用范式，新增无状态组件、不可变数据、Redux 等热点内容。阅读本书，不但可以夯实 React 开发基础，更能全方位紧跟整个 React 生态！

推荐序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还在Beta版本阶段，本书的内容主要是以v0.12为主。目前公开的最新版本为v0.13，书中提到的API将会略有差异，细节方面可以在它的官方网站上查询（https://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html）。 Hedger Wang Facebook资深前端工程师 推荐序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、费力地记录每一个状态的日子一去不复返了——这种老旧的方式既不具备扩展性，又很难加入新的功能，就算可以，也是冒着很大的风险。React使用很新颖的方式解决了这些问题。你只需声明式地定义各个时间点的用户界面，而无须关心在数据变化时需要更新哪一部分DOM。在任何时间点，React都能够以最小的DOM修改来更新整个应用程序。 本书内容 React引入了一些激动人心的新概念，向现有的一些最佳实践发起了挑战。本书将会带领你学习这些概念，帮助你理解它们的优势，创建具备高扩展性的单页面应用（SPA）。 React把主要的注意力放在了应用的“视图”部分，没有限定与服务端交互和代码组织的方式。在本书中，我们将介绍目前的一些最佳实践及配套工具，帮助你使用React构建一个完整的应用。 本书面向的读者 为了更好地掌握本书的内容，你需要有JavaScript和HTML相关开发经验。倘若你做过SPA应用（什么框架不重要，Backbone.js、Angular.js或者Ember.js都可以）那更好，但这不是必需的。 源码和示例 一些来自Reddit克隆示例项目的代码片段会贯穿在整本书中。你可以在http://git.io/vlcpa浏览完整的代码，到http://git.io/vlCUI可以看到在线的demo。 编写过程 我们把本书当作一本虚拟的电子书编写，用一到两个月的时间快速迭代。这种方式有助于创建新鲜及时的内容，而传统书籍往往无法覆盖最新的趋势和技术。 这是本书的第2版，所有的示例代码都更新到了React 0.14版，而且有了一个新的示例项目。

推荐序1 III 推荐序2 V 推荐序3 VII 前言 IX 第 1 章?React 简介 1 背景介绍 1 本书概览 3 Component的创建和复合 3 进阶 5 React工具 6 React实践 6 第 2 章?JSX 8 什么是JSX 9 使用JSX的好处 10 更加熟悉 10 更加语义化 10 更加直观 11 关注点分离 12 复合组件 12 定义一个自定义组件 12 使用动态值 13 子节点 14 JSX与HTML有何不同 16 属性 16 条件判断 17 非DOM属性 19 事件 21 注释 22 特殊属性 23 样式 23 没有JSX的React 24 创建React元素 24 延伸阅读及参考引用 25 JSX官方规范 25 第 3 章?组件的生命周期 26 生命周期方法 26 实例化 27 存在期 27 销毁＆清理期 27 实例化 27 componentWillMount 28 render 28 componentDidMount 29 存在期 30 componentWillReceiveProps 30 shouldComponentUpdate 30 componentWillUpdate 31 componentDidUpdate 31 销毁＆清理期 32 componentWillUnmount 32 反模式：把计算后的值赋给state 32 总结 33 第 4 章?数据流 34 Props 35 PropTypes 36 defaultProps 37 State 37 放在state和props的各是哪些部分 40 无状态的函数式组件 40 总结 41 第 5 章?事件处理 42 绑定事件处理器 43 事件和状态 44 根据状态进行渲染 44 更新状态 45 状态没有“更新”! 46 事件对象 47 总结 48 第 6 章?组件的复合 49 扩展HTML 50 组件复合的例子 50 组装HTML 51 追踪状态 53 整合到父组件当中 54 父组件与子组件的关系 56 总结 59 第 7 章?高阶组件和Mixins 60 简单的例子 60 常见使用场景 63 总结 63 第 8 章?DOM操作 64 访问受控的DOM节点 65 在组件内部查找DOM节点 66 整合非React类库 67 侵入式插件 70 总结 72 第 9 章?表单 73 无约束的组件 74 约束组件 76 表单事件 78 Label 79 文本框和 Select 79 复选框和单选框 82 表单元素的name属性 84 多个表单元素与change处理器 86 自定义表单组件 89 Focus 93 可用性 93 把要求传达清楚 94 不断地反馈 94 迅速响应 94 符合用户的预期 95 可访问 95 减少用户的输入 96 总结 97 第 10 章?动画 98 CSS渐变组 99 给渐变class添加样式 99 渐变生命周期 100 使用渐变组的隐患 101 间隔渲染 101 使用requestAnimationFrame实现间隔渲染 102 使用setTimeout实现间隔渲染 104 弹簧动画 105 总结 106 第 11 章?性能优化 107 shouldComponentUpdate 107 键（key） 109 总结 111 第 12 章?服务端渲染 112 渲染函数 113 React.renderToString 113 React.renderToStaticMarkup 114 用React.renderToString还是用React.renderToStaticMarkup 114 服务端组件生命周期 115 设计组件 116 异步状态 118 同构路由 121 单例、实例及上下文 121 总结 122 第 13 章?开发工具 123 构建工具 123 Browserify 124 建立一个Browserify项目 124 对代码做出修改 126 Watchify 127 构建 127 Webpack 127 Webpack与React 128 调试工具 131 基础工具 131 总结 133 第 14 章?测试 134 上手 135 测试的类型 135 工具 136 使用Jest和Enzyme测试React组件 136 编写组件的内容的断言 136 测试组件的方法和DOM事件 143 编写子组件的断言 144 总结 147 第 15 章?架构模式 148 路由 149 react-router 150 Flux 152 数据流 152 Flux各个部分 153 Dispatcher 153 Action 154 Store 154 控制视图 155 管理多个Store 156 总结 161 第 16 章?不可变性 162 性能优势 162 性能消耗 163 架构优势 164 使用Immutability Helpers Addon 164 使用seamless-immutable 166 使用Immutable.js 167 Immutable.Map 168 Immutable.Vector 168 总结 169 第 17 章?其他使用场景 170 桌面应用 171 游戏 172 电子邮件 177 绘图 183 总结 186

译者介绍：__eol__寸志：陆金所资深前端工程师，《前端外刊评论》创始人。__eol__ 范洪春：阿里巴巴前端工程师，《Web Component实战：探索PolymerJS、Mozilla Brick、Bosonic与ReactJS框架》译者。__eol__题叶：饿了么前端工程师，前端技术独立研究者。__eol__杨森：阿里巴巴前端工程师，React专家。__eol__ 杨森 陈涌