



前端高速发展十余年,我们看到了浏览器厂商的竞争,经历了标准库的竞争,也经历了短短几年 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 的繁荣,成就前端标准更快地推进。
本书希望从实践起步,以深刻的角度去解读 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。
本书的JavaScript 示例代码均使用ES2015/ES6 编写,并遵循 Airbnb JavaScript 规范,但诸如React 或 Redux 源代码引用的原始代码除外。
本书的 CSS 示例代码均为 SCSS 代码,但引用源码库的 CSS 除外。
对于React/Flux/Redux 中常用的专有名词,在不造成读者理解困难的情况下,本书尽量保留英文名词,保持原汁原味。
❏ Virtual DOM:虚拟 DOM
❏ state:状态
❏ props:属性
❏ action:动作
❏ reducer
❏ store
❏ middleware:中间件
❏ dispatcher:分发器
❏ action creator:action 构造器
❏ currying:柯里化
如果你有什么好的意见和建议,请及时反馈给我们。可以通过 i.arcthur@gmail.com 或在知乎上发私信找到我。
本书的示例代码
托管在 https://github.com/arcthur/react-book-examples和https://coding.net/u/arcthur/p/react-book-examples/git,它可能会和书中的内容有所出入,因为我们会根据情况对代码略加修改,所以在阅读的时候,建议结合文档一同查看。
从 React 诞生以来,我就在关注这个领域。在 2015 年年底,我在知乎上开辟了名为 pure render的专栏。不论是我现在的角色,还是从建设一个团队的角度来考虑,我都想把在 React 实践中的心路历程分享出来,和大家一起学习,共同成长。
万万没想到,专栏的持续写作得到了相当多知友的认可。截止今天,专栏运行 8 个月左右,积累了 20 篇文章,得到了 4500 多人的关注。对于团队来说,既是鼓舞,更是压力。专栏在运行过程中,参与的伙伴也渐渐变多,我希望它可以一直保持高质量,让整个社区的 React 爱好者们一起贡献。
专栏写作不久,就有几位编辑老师找到我,那时我并没有准备好去系统地撰写一些内容,但随着专栏中沉淀的文字越来越多,我想不妨可以试着写一些关于 React的更深入的分析,以及整体应用层面上的实践,让更多开发者,乃至 IT 圈更多地关注这个库。在写作本书这半年多的时间内,React 在业界的关注度不断上升,也涌现出很多优秀的实践,我非常感谢我身在的这个社区。
耗费了大量晚上及周末的时间,断断续续的编写与修改,书稿的内容终于定下来了,其中很多内容是对专栏已有内容的修复与升级。书与专栏同样是文字的传播,平台不同,初衷却是一样的。我希望它可以精益求精,至少能在一定程度上帮助开发者深入学习React。
在此,特别感谢知乎 pure render 专栏组的所有成员献计献力,其中杨森、丁玲、李彬彬、黄宗权、范洪春、宋邵茵、胡可本、胡清亮等组员不同程度地贡献了实战经验与想法,并参与审校本书当中。真心感谢你们,是你们的热情和坚持让这本书可以面世。
同样感谢写作中给予很多宝贵意见的朋友们,包括魏畅然、赵剑飞、李成熙、胡杰、郭达峰、阮一峰、张克军、寸志、张克炎等。
最后,由衷地感谢王军花老师从头到尾认真负责的态度,让这本书更精彩。
陈屹
2016 年 7 月 1 日于杭州