(2017.2重印) 内 容 提 要 本书从几个维度介绍了 React。一是作为 View 库，它怎么实现组件化，以及它背后的实现原理。二是 扩展到 Flux 应用架构及重要的衍生品 Redux，它们怎么与 React 结合做应用开发。三是对 React 与 server 的碰撞产生的一些思考。四是讲述它在可视化方面的优势与劣势。 本书适合有一定经验的前端开发人员阅读。 ◆ 著 陈 屹 责任编辑 王军花 责任印制 彭志环 ◆ 人民邮电出版社出版发行 北京市丰台区成寿寺路11号 邮编 100164 网址 http://www.ptpress.com.cn 北京 电子邮件 [email protected] 印刷 ◆ 开本：800×1000 1/16 印张：22.75 字数：538千字 印数：6 501— 9 500册 2016年 11 月第 1 版 2017年 2 月北京第 3 次印刷 定价：79.00元 读者服务热线：(010)51095186转600 印装质量热线：(010)81055316 反盗版热线：(010)81055315 广告经营许可证：京东工商广字第 8052 号 前 言 1 1 2 序 3 React 是目前前端工程化最前沿的技术。2004 年 Gmail 的推出，让大家猛然发现，单页应用 的互动也可以如此流畅。2010 年，前端单页应用框架接踵而至，Backbone、Knockout、Angular， 各领风骚。2013 年，React 横空出世，独树一帜：单向绑定、声明式 UI，大大简化了大型应用的 构建。Strikingly 接触到 React 之后不久，就开始用 React 重构前端。 当时我想，2013 年或许会因为 React 的出现，成为前端社区的分水岭。今天回看，确实如此。 毋庸置疑，React 已经是前端社区里程碑式的技术。React 及其生态圈不断提出前端工程化解 决方案，引领潮流。在过去一两年里，React 也是各种技术交流分享会里炙手可热的议题。 React 之所以流行，在于它平衡了函数式编程的约束与工程师的实用主义。 4 5 6 React 从函数式编程社区中借鉴了许多约定：把 DOM 当成纯函数，不仅免去了烦琐的手动 DOM 操作，还开启了多平台渲染的美丽新世界；在此之上，React 社区进一步强调不可变性 （immutability）和单向数据流。这几个约定将原本很复杂的程序化简，加强了程序的可预测性。 7 React 也有实用主义的一面，它不强迫工程师只用函数式，而是提供了简单粗暴的手段，方 便你实现各种功能——想直接操作 DOM 也可以，想双向绑定也没问题。函数式约定搭配实用主 义，让我不禁想起 Facebook 一直倡导的黑客之道：Done is better than perfect。 8 React 还是一门年轻的技术，网上能学习的材料也比较零散。本书由浅到深，手把手地带领 读者了解 React 核心思想和实现机制。因为 React 受到了很多关注，社区里出现了各种建立大型 React 应用的方案。本书总结了目前社区里的最佳实践，方便读者立刻在实战中使用。 郭达峰 Strikingly 联合创始人及 CTO 9 10 11 12 2 前 言 前 言 1 1 前 言 2 3 前端高速发展十余年，我们看到了浏览器厂商的竞争，经历了标准库的竞争，也经历了短短 几年 ECMAScript 标准的迭代。到今天，JavaScript 以完全不同的方式呈现出来。 这是最好的时代，这是最坏的时代，这是智慧的时代，这是愚蠢的时代；这是信仰的时期， 这是怀疑的时期；这是光明的季节，这是黑暗的季节；这是希望之春，这是失望之冬。 这是对前端发展这些年最恰当的概括。整个互联网应用经历了从轻客户端到富客户端的变 化，前端应用的规模变得越来越大，交互越来越复杂。在近几年，前端工程用简单的方法库已经 不能维系应用的复杂度，需要使用一种框架的思想去构建应用。因此，我们看到 MVC、MVVM 这些 B/S 或 C/S 中常见的分层模型都出现在前端开发的过程中。与其说不断在创新，还不如说前 端在学习之前应用端已经积累下来的浑厚体系。 在发展的过程中，出现了大量优秀的框架，比如 Backbone、Angular、Knockout、Ember 这 些框架大都应用了 MV* 的理念，把数据与视图分离。而就在这样纷繁复杂的时期，2013 年 Facebook 发布了名为 React 的前端库。 从表现上看，React 被大部分人理解成 View 库。然而，从它的功能上看，它远远复杂于 View 的承载。它的出现可以说是灵光一现，我记得曾经有人说过，Facebook 发布的技术产品总是包含 伟大的思想。的确，从此，Virtual DOM、服务端渲染，甚至 power native apps，这些概念开始引 发一轮新的思考。 从官方描述中，创造 React 是为了构建随着时间数据不断变化的大规模应用程序。正如它的 描述一样，React 结合了效率不低的 Virtual DOM 渲染技术，让构建可组合的组件的思路可行。 我们只要关注组件自身的逻辑、复用及测试，就可以把大型应用程序玩得游刃有余。 在 0.13 版本之后，React 也慢慢趋于稳定，越来越多的前端工程师愿意选择它作为应用开 发的首选，国内也有很多应用开始用它作为主架构的核心库。 在未来，React 必然不过是一块小石头沉入水底，但它溅起的涟漪影响了无数的前端开发的 思维，影响了无数应用的构建。对于它来说，这些就是它的成就。成就 JavaScript 的繁荣，成就 前端标准更快地推进。 4 5 6 7 8 9 10 11 12 2 前 言 本书目的 本书希望从实践起步，以深刻的角度去解读 React 这个库给前端界带来的革命性变化。 目前，不论在国内，还是在国外，已经有一些入门的 React 图书，它们大多在介绍基本概念， 那些内容可以让你方便地进入 React 世界。但本书除了详细阐述基本概念外，还会帮助你从了解 React 到熟悉其原理，从探索 Flux 应用架构的思想到精通 Redux 应用架构，帮助你思考 React 给 前端界带来的价值。React 今天是一种思想，希望通过解读它，能够让读者有自学的能力。 阅读建议 本书从几个维度介绍了 React。一是作为 View 库，它怎么实现组件化，以及它背后的实现原 理。二是扩展到 Flux 应用架构及重要的衍生品 Redux，它们怎么与 React 结合做应用开发。三是 对它与 server 的碰撞产生的一些思考。四是讲述它在可视化方面有着怎样的优势与劣势。 下面是各章的详细介绍。 第1章 这一章从 React 最基本的概念与 API 讲起，让读者熟悉 React 的编码过程。 第 2 章 这一章更深入到 React 的方方面面，并从一个具体实例的实现到自动化测试过程来 讲述 React 组件化的过程和思路。 第 3 章 这一章深入到 React 源码，介绍了 React 背后的实现原理，包括 Virtual DOM、diff 算法到生命周期的管理，以及 setState 机制。 第 4 章 这一章介绍了 React 官方应用架构组合 Flux，从讲解 Flux 的基本概念及其与 MV* 架构的不同开始，解读 Flux 的核心思想。 第 5 章 这一章介绍了业界炙手可热的应用架构 Redux，从构建一个 SPA 应用讲到背后的 实现逻辑，并扩展了 Redux 生态圈中常用的 middleware 和 utils 方法。 第 6 章 这一章讲述 Redux 高阶运用，包括高阶 reducer、它在表单中的运用以及性能优化 的方法。另外，从源码的角度解读了 Redux。 第 7 章 这一章介绍了 React 在服务端渲染的方法，并从一个实例出发结合 Koa 完整地讲 述了同构的实现。 第 8 章 这一章探索了实现可视化图形图表的方法，以及如何通过这些方法和 React 结合在 一起运转。 附录 A 探讨了 React 开发环境的基本组成部分以及常规的安装方法。 附录 B 探讨了团队实践或多人协作过程中需要关注的编码规范问题。 附录 C 探讨了 Koa middleware 的相关知识，帮助理解 Redux middleware。 前 言 3 代码规范 本书的 JavaScript 示例代码均使用 ES2015/ES6 编写，并遵循 Airbnb JavaScript 规范，但诸如 React 或 Redux 源代码引用的原始代码除外。 本书的 CSS 示例代码均为 SCSS 代码，但引用源码库的 CSS 除外。 保留英文名词 对于 React/Flux/Redux 中常用的专有名词，在不造成读者理解困难的情况下，本书尽量保留 英文名词，保持原汁原味。  Virtual DOM：虚拟 DOM 1 2 3 4  state：状态  props：属性  action：动作 5  reducer  store  middleware：中间件 6  dispatcher：分发器  action creator：action 构造器  currying：柯里化 读者反馈 7 8 如果你有什么好的意见和建议，请及时反馈给我们。可以通过 [email protected] 或在知乎 上发私信找到我。 9 示例代码下载 本书的示例代码①托管在 https://github.com/arcthur/react-book-examples 和 https://coding.net/u/ arcthur/p/react-book-examples/git，它可能会和书中的内容有所出入，因为我们会根据情况对代码 略加修改，所以在阅读的时候，建议结合文档一同查看。 10 11 —————————— ① 本书的源代码也可从图灵社区（www.ituring.com.cn）本书主页免费注册下载。 12 4 前 言 致谢 从 React 诞生以来，我就在关注这个领域。在 2015 年年底，我在知乎上开辟了名为 pure render 的专栏。不论是我现在的角色，还是从建设一个团队的角度来考虑，我都想把在 React 实践中的 心路历程分享出来，和大家一起学习，共同成长。 万万没想到，专栏的持续写作得到了相当多知友的认可。截止今天，专栏运行 8 个月左右， 积累了 20 篇文章，得到了 4500 多人的关注。对于团队来说，既是鼓舞，更