快速上手React编程

前言

那是 2008 年，银行纷纷倒闭。我在联邦存款保险公司（Federal Deposit Insurance Corporation，FDIC）工作，主要任务是偿还倒闭、失败和破产的银行储户。我承认，就职业安全感而言，我的工作等同于在雷曼兄弟上班或在泰坦尼克号上卖票。但是，当我所在的部门还没有开始最终的预算削减时，我还有机会开发一款名为 EDIE 的应用。这款应用由干一个简单的原因而变得非常流行; 人们急于想知道他们的存款中有多少由美国联邦政府提供保险，而 EDIE 能够估算这一数额。

但是存在一个问题∶ 人们不喜欢把他们的私人账户告诉政府。为了保护他们的隐私，这款应用完全在前端完成∶ JavaScript、HTML 和 CSS，没有任何后端技术。如此，FDIC就不会收集任何个人财产信息。

这款应用经历了数十次迭代，留下了一团混乱的意大利面条式代码。开发人员来去匆匆，没有留下任何文档，也没有任何符合逻辑的简单算法。这就像没有地图就要夫乘坐纽约市地铁一样。有很多函数可以调用其他函数、奇怪的数据结构以及更多的函数。在现代术语中，这款应用采用纯用户界面（User Interface，UI），因为没有后端。

我多么希望那时能有 React。React 带来了愉悦。它是一种全新的思考方式，也是一种全新的开发方式。将核心功能放在一处，而不是将其分解为 HTML 和 JS，这种简单是一种解放。它重新点燃了我对前端开发的热情。

React 是开发 UI 组件的一种新方法。它是新一代的表现层库。与模型和路由库一起配合，React 可以在 Web 和移动技术栈中取代 Angular、Backbone 或 Ember。这就是我写这本书的原因。我从来不喜欢 Angular∶ 它太复杂和大一统了。模板引擎是特定领域的，甚至不再是 JavaScript;它是另一种语言。我使用过 Backbone，喜欢它的简单和 DIY方式。 Backbone 是成熟的，它更像是你自己框架的基石，而不是一个全面的、大一统的框架。 Backbone 的问题是模型与视图之间不断增加的交互.复杂性∶ 多个视图更新多种模型，有的会更新其他视图，有的会触发模型上的事件。

举办 React 在线课程（http∶//mng.bz/XgkO），以及参加各种会议和活动的个人经验已经显示，开发者渴望一种更好的开发 U 的方法。大多数商业价值存在于 UI，而后端负责提供商品。在海湾地区，也是我居住和工作的地方，大多数软件工程师的职位空缺是前端或（一个时髦的头衔）通才/全栈开发者。只有少数像谷歌、亚马逊和 Capital One 这样的大公司，对数据科学家和后端工程师的需求依然强劲。

想要确保职业安全感，或找到一份好工作，最好的方法就是成为一名多面手。要做到这一点，最快的方法是使用同构的、可扩展的、对开发者友好的库，就像前端的 React 搭配后端的 Node.js，以防止需要处理服务器端代码。

对于移动开发者来说，HTML5 是两三年以前的一个肮脏词汇。Facebook 放弃了HTML5应用，转而支持更高效的原生（native）实现。但是这种不利观点正在迅速改变。通过 React Native，可以渲染移动应用∶ 可以保留 UI组件，但在不同的环境下调整它们，这是另一种支持学习 React 的观点。
编程可以是创造性的。不要陷入乏味的任务、复杂的事情以及伪关注点分离。砍掉所有不必要的垃圾，通过 React 提供的简化的模块之美、基于组件的 UI 释放你的创造力。为同构的 JavaScript 引入一些 Node，你将达到禅定的境界。

学习建议

本书旨在解决前端开发者的烦恼，使他们的生活更有意义、更加快乐，并通过介绍 React帮助他们赚到更多的钱——这些会以一种快速的方式进行。本书是十几个人工作一年半的成果。至少，本书会开拓你的思维，让你了解一些不寻常的概念，如 JSX、单向数据流和声明式编程。

路线图

本书分为两部分∶"React 核心"（第 1 至第 11 章）和"React 生态"（第 12至第 20 章）。每一章都会为描述性的文字配以恰当的代码示例和图表。每一章也都有一段可选的介绍视频，帮助你决定是否需要阅读该章。各章是以独立的方式编写的，这意味着即便不按顺序阅读，也不会带来麻烦——尽管建议按顺序阅读。每章的结尾是一个小测验，以强化你对该章内容的记忆，最后还有小结。

每一部分都以一系列更大的项目结尾，这些项目将给你带来更多的 React 经验，通过前几章介绍的概念和知识构建应用，巩固你对知识的理解。这些项目以可选的截屏视频作为补充来强化你的学习，向你展示动态的过程，如创建文件和安装依赖（Web 开发包含很多组成部分!）。这些项目是书中不可或缺的一部分——不要跳过它们。建议你自己键入每一行代码，并避免复制和粘贴。研究表明; 打字和写作能提高学习效率。

本书以5 个附录为结尾，它们提供了补充材料。在开始阅读之前，请连同目录一起把它们看一遍。

源代码可 以在 Manning 出版社的 网 站（和 GitHub上找到。查看"源代码"部分可获得更多详情。读者也可扫描本书封底的二维码来下载源代码和每章的介绍视频。书中已展示完整的代码清单———这比跳转到 GitHub 或代码编辑器去查看文件方便得多。

第Ⅰ部分 React 基础

你好!我是 Azat Mardan，我即将带你进入一段美妙的 React 世界之旅。这将使前端开发更加愉悦，代码更易于编写和维护，用户也会对应用的速度感到欣喜。React 改变了 Web开发的游戏规则∶ React 社区开创了许多方法、术语和设计模式，并且其他库也都追随了 React 的脚步。

我已经在线上直播和个人研讨会上教授这些内容 20 余次，听众是数以百计的软件工程师，他们具有不同的背景和资历。因此，这些内容是经过实践检验过的∶ 它们是我的 React基础课程经过提炼后的、最有效的书面版本。这些章对于你熟悉 React 术语至关重要。第 1 至第 11 章是多人近两年来工作的成果，里面介绍的主题层层递进，需要快速阅读。阅读这些章的最佳方法是从第 1章开始，按照顺序进行。每章都包含一段视频，第 1 至第 8 章的最后还有一个测验，第 9 至第 11 章是具体项目，包含需要你自主完成开发的作业。

总而言之，本书的这一部分为 React 概念、模式和特性构建了坚实的基础。到了国外，不通过学习就可以理解它们的语言吗? 显然不行，这就是为什么在尝试构建复杂应用之前，必须先学习 React"语言"的原因。因此，学习这些 React 基本概念至关重要。学习 React语言正是接下来的11章要完成的工作。

让我们开始使用 React，并学会流利的 React 语言吧!

章初识 React

本章内容∶

●理解什么是React

● 使用 React 解决问题

● 把 React 添加到 Web 应用中

● 编写第一个 React 应用∶ Hello World

2000年初，在我开始从事 Web 开发工作时，所需要的只是一些 HTML 和诸如 Perl 或 PHIP这样的服务器端语言。那些使用 alert（）弹出信息的美好时光只是为了调试前端代码。事实上，随着互联网的发展，构建网站的复杂度已经急剧增加。网站已经成为具有复杂用户界面、业务逻辑和数据层的 Web 应用，并且需要随时间进行修改和更新，且通常是实时的。

许多 JavaScript 模板库已被创建用来尝试解决处理复杂用户界面（UI）的问题。但是，它们仍需要开发人员坚持旧的关注点分离原则———分离样式（CSS）、数据和结构（HTML）以及动态交互（JavaScript），而它们并不能满足现代需求。（还记得术语 DHTML 吗?）

相比之下，React 提供了一种简化前端开发的新方法。React 是—个功能强大的 UⅡ 库，提供了许多大公司（如 Facebook、Netflix 和 Airbnb）已经采纳和认定的替代方法。React 允许使用 JavaScript 创建可重用的 UI组件，而不是为 UI 定义—次性的模板，可以在网站中反复使用这些组件。

还需要验证码控制器或日期选择器吗?使用 React 定义一个<Captcha/>或<DatePicker/>组件，就可将它们添加到表单中∶ 这就是一个简单的插件组件，具备与后端通信的所有功能和逻辑。当用户输入四个或更多个字母时，是否需要一个自动完成框来异步查询数据库?定义一个<Autocomplete charNum="4"少组件就可以进行异步查询。还可以选择是否存在一个文本框 UI 或者没有 UI，此时可以使用另一个自定义表单元素，也许是<Autocomplete textbox=".."/>。

这种做法并不新奇。"创建可组合的 UI"的方法已经存在很长时间了，但 React 是第一个使用无模板的纯 JavaScript 来实现的。这种方法已被证明易于维护、重用和扩展。

React 是一个很好的 UI 库，它应该成为 Web 前端工具包的一部分; 但它并不是所有 Web 前端开发的完整解决方案。在本章中，我们将介绍在应用中使用 React 的优缺点，以及如何将其适配到现有的 Web 开发技术栈中。

本书的第 Ⅰ 部分重点介绍 React 的主要概念和特性，第Ⅱ部分着重讨论与 React 相关的库，以构建更复杂的前端应用（也就是 React 技术栈或 React 全家桶）。每部分都展示使用 React 和最受欢迎的库进行的新系统（绿地）和遗留系统（棕地）的开发'，所以你可以了解如何在真实场景中使用它。

各章的视频和源代码

每个人的学习方法都不同。有些人喜欢文字和视频，有些人更喜欢通过面授教学学习。本书的每一章都包含一段简短的视频，在不到5分钟的时间内就可以解释该章的要点。观看视频是可选的，如果喜欢视频方式或需要复习，它们可以为你提供摘要。观看每段视频后，可以决定是否需要阅读该章，或是跳到下一章。

1.1 什么是 React

要合理解释 React，首先需要给它下个定义。那么，什么是 React 呢?它是一个 UI组件库。这些 UI组件通过React 使用 JavaScript 而不是一种特殊的模板语言创建。这种方法被称为"创建可组合的 UI"，它是 React 的理念基础。

React UI组件是高度自包含、有特定关注点的功能单元。例如∶ 可能有日期选择器、验证码、地址和邮政编码组件。这些组件具有视觉展示和动态逻辑。某些组件甚至可以自己与服务器通信∶ 例如，自动完成组件可能会从服务器提取自动完成列表。

用户界面

广义上，用户界面²是促进计算机和人类之间交互的一切。想想一张穿孔卡片（早期的为计算机输入指令用的一种纸质卡片，这个术语源自 Herman Hollerith，他在 1890 年为美国人口局设计了电子制表系统，采用了穿孔卡片）或鼠标，它们都是 UI。当进入软件时代时，工程师们谈论的图形用户界面（Graphical User Interface，GUI）是早期的个人电脑（如 Mac和 PC）的先驱。GUI 包括菜单、文本、图标、图片、边框和其他元素。

Web 元素只是 GUI的一小部分，它们位干浏览器中，但 Windows、OS X 和其他操作系统中也有用于桌面应用的元素。当在本书中提到 UI时，意指 Web GUI。

不要将基于组件的架构（Component-Based Architecture，CBA）和 Web 组件搞混淆，Web组件只是在 React 之前存在的最新 CBA 实现之一。这种架构通常被认为比单个庞大的 UI更容易重用、维护和扩展。React 带来的好处是可以使用纯 JavaScript（无模板）和一种新的视角来看待组件的组合。

1.2 React 解决的问题

React 解决了什么问题?放眼近几年的 Web 开发，你会注意到在前端应用中构建和管理复杂 Web UI存在的问题，React 主要就是为了解决这些问题而生。试想一下，像 Facebook 这样的大型网络应用，开发此类应用时最痛苦的任务之一就是管理视图对数据变更的响应。

浏览 React 官网以便了解这个问题的更多信息∶"我们构建 React 来解决如下问题∶构建包含随时间变化的数据的大型应用"3。这很有趣!我们还可以查看 React 的历史来了解更多信息。React Podcast 上的一个讨论提到，React 的创始人Jordan Walke 正在 Facebook上解决一个问题∶一个自动完成字段，有多个数据源对其进行更新，这些数据都是从后端异步获取的。确定在哪里插入新行以便重用 DOM 元素变得越来越复杂。Walke 决定每次重新生成这个字段的 UI 展示（DOM 元素）。这个解决方案因其简洁性而变得非常优雅∶ UI作为函数，数据作为参数并调用这种函数，并且使渲染视图结果变得可预测。

之后，事实证明在内存中生成元素非常快，实际瓶颈出现在渲染到 DOM中时。但是 React 团队提出了一种可以避免非必要 DOM 渲染的算法。这使得 React 非常快速（在性能方面）。React 的卓越性能表现，以及对开发人员友好的基于组件的架构是非常成功的组合。 React 的这些相关内容和其他优点将在下一节中介绍。

React 解决了Facebook 的初始问题，许多大公司都认同这种做法。React采用的方案非常稳固，而且人气逐月攀升。React 源自 Facebook，但现在不仅被 Facebook 使用，Instagram、 PayPal、Uber、Sberbank、Asana6、Khan Academy、HipChat8、Flipboard?以及 Atom10都在使用 React。l大多数这些应用最初使用的是其他技术（通常是带有模板引擎的 Angular 或 Backbone），但现在都非常乐于切换到 React。

1.3 使用 React 的好处

所有新的库或框架都会声称相比它的前辈在某些方面做得更好。一开始，我们拥有了 jQuery，同使用原生 JavaScript 编写跨浏览器代码相比，jQuery 是一次跳跃式的提升。你应该还记得，一个 AJAX 调用需要写多行代码，而且还必须考虑兼容 IE 浏览器和类 WebKit浏览器。使用jQuery，这只需要一个调用∶ 例如S.ajax（）。过去，jOuery 被称为一个框架，可如今它已经不再是了!现在，框架是一个更大且更强的概念。

与 Backbone 和 Angular类似，每个新生代 JavaScript 框架都会带来很多新的优点。在这一点上 React 并非唯一。React 带来的革新是它挑战了大多数流行的前端框架所使用的一些核心概念∶ 例如需要拥有模板这样的想法。

以下列表突出显示了React 与其他库和框架相比的一些优点∶

● 更简单的应用——React 使用纯 JavaScript 构建 CBA; 声明式风格; 强大且开发者友好的 DOM 抽象（不只是 DOM，还有 iOS、Android 等）。

● 快速的 UI——React 通过虚拟 DOM和智能协调算法提供出色的性能，借助此优点，可以让你的性能测试不再需要启动一个无界面浏览器。

● 编写更少的代码——React伟大的社区和丰富的组件生态为开发人员提供了各种库和组件。考虑框架选型时，这一点至关重要。

许多特点使得 React 相比其他大多数前端框架更容易使用。让我们逐个打开这些项目，从它的简单性开始。

1.3.1简单性

计算机科学中的简单性概念受到开发人员和用户的高度认可。它不同干易用性。简单的事情可能实现起来会很困难，但最终会更加优雅和高效。通常，一件容易的事情最终会变得复杂。简单性与KISS 原则（保持简单、傻瓜）²密切相关。要点是∶ 越简单的系统工作得越好。

React 通过为软件工程师提供更好的 Web 开发体验，提供了一个更简单的解决方案。当我开始使用 React 时，经历了一次相当大的转变，我需要时刻提醒自己使用纯粹的、无框架的 JavaScript 而不是 jQuery。

在 React 中，这种简单性通过以下特性实现∶

● 命令式风格之上的声明式风格——React 通过自动更新视图来实现在命令式风格之上拥抱声明式风格。

● 使用纯 JavaScript 的基于组件的架构——React 不会为其组件使用领域特定语言（Domain Specific Language，DSL），只是纯 JavaScript。在实现同一功能时没有分离。● 强大的抽象——React 拥有与 DOM 进行交互的简化方法，允许进行规范化的事件处理和使用其他接口，就像在浏览器中一样。让我们逐一介绍。

【下载地址】

链接：https://pan.baidu.com/s/1wels7m0X9VzfZCiQI3dV_g

提取码：d86s