React开发实战

第一章 REACT入门

React 是由 Facebook 创建的一个开源项目。它提供了一种在 JavaScript 中构建用户界面的全新方式。自从它公开发布后，这个库迅速风靡全球，并且围绕着它培育了一个生机勃勃的社区。

通过阅读本书，你将掌握在项目中使用 React 所需的方方面面。因为 React 只关注UI 界面的渲染，而不会对应用程序的其他模块所使用的技术做任何假设，所以本书同时也将介绍能匹配 React 模式的路由(Routing)和应用程序架构。

在本章中，我们将从一个较高的层面讲述一些主题，以便你能尽快开始创建应用程序。这些主题包括：

● React 的完整定义，以及优点概览

● 如何使用 JSX，这是一个在 React 中用来渲染 UI 的 JavaScript 语法扩展

● 如何创建包含属性和状态的 React 组件

1.1 开始学习之前

React 针对的是现代风格的 JavaScript 开发生态系统。为能亲自尝试本书中的代码示例，你需要安装 Node.js 和 npm。此外，还需要熟悉函数式 JavaScript 语法风格和这门语言最新的特性，如箭头函数(arrow functions)和类。

1.1.1 Node.js 和 npm

JavaScript 自诞生之日起就运行在浏览器上，但是通过 Node.js 的开源命令行工具，可以使 JavaScript 运行在你的本地计算机和服务器上。与 npm(Node Package Manager)一道，Node.js 已经成为一项在本地计算机上进行 JavaScript 应用程序开发的极有用工具，它使得开发人员可以创建脚本来运行任务(例如，复制和移动文件，或是启动一个本地开发服务器)，以及自动下载应用程序所依赖的组件。

如果你尚未安装 Node.js，现在就下载它的 Windows、Mac 或者 Linux 版本，将其安装到你的计算机上。

1.1.2 JavaScript ES6

JavaScript 是一门自诞生起多年一直在不断进化的语言。最近，JavaScript 技术社区已经认同了一组新的语言特性。有一些最新的浏览器已经能够支持这些特性，React 社区也广泛地使用了这些新的特性(例如，箭头函数、类、展开操作符)。React 同时鼓励在JavaScript 代码中使用函数式编程模式，所以你也需要熟悉在 JavaScript 中函数和上下文是如何工作的，这样你才能了解 map、reduce 和 assign 等方法。如果你对这些细节感觉有些模糊，可参阅 Apress 网站(www.apress.com/)和本书的 GitHub 页面上有关这些主题的在线附录说明。

1.2 定义 React

为清楚地说明 React 究竟为何物，我将对它做如下定义：React 是一个使用 JavaScript 和 XML 技术(可选)构建可组合用户界面的引擎。

下面对 React 定义的每个部分再详加说明：

React 是一个引擎：React 的网站将它定义为一个库，但是我觉得使用“引擎”这个词更能体现出 React 的核心优势：用来实现响应式 UI 渲染的方式。React 的方式是将状态(在一个给定的时间点，所有用来定义应用程序的内部数据)从展现给用户的 UI 中分离出来。在 React 中，你可以声明如何将应用程序的状态表现为 DOM 的虚拟元素，然后自动更新 DOM 以反映出状态的变化。

“引擎”这个术语首先被 Justin Deal 用来描述 React，因为他觉得 React 渲染 UI 界面的方式和游戏引擎渲染的工作方式十分相似。

创建可组合用户界面：减少创建和维护用户界面的复杂性一直是 React 的核心目标。

React 拥抱了这样一种理念：将 UI“打散”成易于重用、扩展和维护的组件与自包含的、关注特定用途的构件(building blocks)。

使用 JavaScript 和 XML 技术(可选)：React 是一个可用于浏览器、服务器和移动设备之上的纯 JavaScript 库。如你将在本章中所见，React 有一种可选的语法来让你可以使用 XML 来描述 UI。一开始你可能会对这种语法感到有些陌生，但使用 XML 对于描述用户界面其实有诸多优点，包括：XML 是声明性的，很容易通过 XML 观察元素之间的关系，也很容易使 UI 的整体结构可视化。

1.3 React 的优点

市面上有许多的 JavaScript MVC 框架。Facebook 有什么理由还要创建 React？你有什么理由要使用 React？下面的三节内容将探索 React 的一些优点，从而回答这两个问题。

1.3.1 简单易学的响应式渲染

在 Web 开发的早期，那时还根本没有单页应用程序这个概念，用户每次在页面上进行一次交互(比如单击了一个按钮)，就算新的页面只和原有页面仅有一点不同，服务器都会将一整页新的页面发送回客户端浏览器。从用户的角度看，体验会非常糟糕，不过程序员倒是很容易规划出用户在某一时刻能看到哪些内容。

单页应用程序持续地从服务器获取新数据，并在用户进行交互时变换 DOM 上面的部分内容。在用户界面逐渐变得复杂时，应用程序也要实现越来越复杂的逻辑来检验应用程序的当前状态，并对 DOM 及时进行所需的修改。

许多 JavaScript 框架(特别是那些在 React 出现之前的框架)都使用了数据绑定技术，来处理这种日益增加的复杂性并保持用户界面和应用程序状态的同步，但是数据绑定在可维护性、可扩展性和性能上，都有一些缺陷。

响应式渲染比传统的数据绑定技术要更容易使用一些。它让我们用一种声明方式，来定义组件的外观和行为。当数据发生变化时，React 在概念上会重新渲染整个用户界面。

当然，每次在状态数据发生变化时就真的重新渲染整个用户界面，在性能上是不可接受的，React 使用了一种存在于内存中的轻量级 DOM 表示法，这被称为“虚拟 DOM”。

处理这种内存中的虚拟 DOM 要比处理真正的 DOM 更快、更有效。当因为用户的交互或者数据的获取而导致应用程序的状态发生改变时，React 快速地将 UI 的当前状态与期望的状态进行比较，然后计算出要对真实 DOM 所需进行的最小更改。这种工作方式使得 React 非常快、非常高效。即使在一个移动设备上，React 应用程序也能轻松地达到 60fps 的刷新率。

1.3.2 使用纯 JavaScript 进行面向组件开发

在一个 React 应用程序中，一切都由组件组成，组件就是应用程序中的自包含的、关注特定用途的基础构件。基于组件来开发应用程序使用了一种“分而治之”的途径，来避免在某个地方有太高的复杂性。由于组件可以组合起来，每个组件都可以尽量保持小巧，通过将更小的组件组合在一起，创建复杂的包含更多功能的组件就变得简单了。

不同于使用特定的模板语言或是传统 Web 应用程序 UI 中用到的 HTML 标记，React组件由普通的 JavaScript 写就。使用普通 JavaScript 代码编写组件有一个很好的理由：模板限定了你可用来构造 UI 界面时能使用到的功能特性。React 则是使用一门功能完整的编程语言来渲染界面，这相对于使用模板具备很大的优势。

另外，通过使组件成为自包含的、并在相关视图逻辑中使用一个统一的标记，React组件实现了关注点的分离。在Web开发的早期岁月，关注点的分离是通过在不同部分使用不同的语言来强制实现的：内容结构使用HTML，样式使用CSS，逻辑行为使用JavaScript。这种方法在问世之初工作得很好，因为那个时候Web页面还是静态呈现的。

但是现在用户界面变得更有交互性、更复杂，显示逻辑和HTML标记不可避免地被绑定在一起；标记、样式和JavaScript之间的分离变成了仅是技术上的分离，而非关注点的分离。

【下载地址】

链接：https://pan.baidu.com/s/1a5XR5l-oRztzx-hQ9D_0MA

提取码：kgoc