1.1 初识React

React是一个用于构建跨平台用户界面的JavaScript库。React给予开发者强大的思维模型并帮助开发者以声明式和组件驱动的方式构建用户界面。这是React最宽泛和最简短的定义，我们将在本书中详细解释这些观点。

在广阔的Web工程领域中，React位于何处？React经常在Vue、Preact、Angular、Ember、Webpack、Redux以及其他知名JavaScript库和框架的相同领域中被谈及。React通常是前端应用的主要部分并且与我们刚刚提到的其他库和框架拥有类似的特性。事实上，相比以往，许多流行的前端技术现在都与React莫名地类似。曾几何时，React的做法是新颖的，而其他技术自那时就被React的组件驱动、声明式做法所影响。React持续保持“重新思考已建立的最佳实践”的精神，其主要目标是为开发人员提供一种富有表现力的思维模型和一种高性能的技术来构建UI应用。

是什么使得React的思维模型如此强大？这是因为它利用了计算机科学和软件工程技术的深层领域。React的思维模型广泛使用了函数式和面向对象编程的概念，并重点将组件作为构建的主要单元。React应用中，开发人员可以用组件创建用户界面。React的渲染系统管理着这些组件并保持着应用视图的同步。组件通常对应着用户界面的一个部分，如日期选择器、页头、导航等，但它们也可以负责客户端路由、数据格式化、样式以及客户端应用的其他职能。

React中的组件应该易于理解并很容易与其他React组件集成；它们遵循可预测的生命周期，能够维护自己的内部状态，并与“常规Javascript”兼容。我们将在本书的后续部分深入探讨这些理念，但目前我们可以先从较高层次来看看它们。图1-1给出了React应用的主要“成分”的概览。

让我们大致了解一下每个部分。

• 组件——封装的功能单元，它是React的主要单元。它们利用数据（属性和状态）将UI渲染为输出。我们将在第2章及之后的各章中探讨React组件处理数据的方式。某些类型的React组件也提供了一组可以“挂载”的生命周期方法。渲染过程（基于数据输出和更新UI）在React中是可预见的并且组件可以使用React的API“挂载”到其中。

• React库——React使用一组核心库。React库的核心与react-dom和react-native紧密配合，其侧重于组件规范和定义。它让开发者能够构建一棵浏览器或其他平台的渲染器所能使用的组件树。react-dom就是这样一个渲染器，它针对的是浏览器环境和服务器端渲染。React Native库专注于原生平台，它能够为iOS、Android和其他平台创建React应用。

• 第三方库——React并不自带数据建模、HTTP调用、样式库或其他前端应用的常见工具。这使开发人员可以在自己的应用中自由地使用其他代码、模块或者其他中意的工具。尽管这些常见技术并没有与React捆绑在一起，但围绕React的更广泛的生态系统中却充满了极为有用的库。本书中，我们将使用其中一些库，并将在第10章和第11章研究Redux—— 一个状态管理库。

• 运行React应用——React应用运行在开发人员为之构建应用的平台上。本书关注的是Web平台并构建了一个基于浏览器和服务器的应用，而其他诸如React Native和React VR这样的项目则创造了应用在其他平台上运行的可能性。

本书中我们会花大量的时间来探索React的方方面面，但开始之前可能会有一些问题。React真的有所帮助吗？还有谁在使用React？权衡使用或不使用React的依据有哪些？在采用一项新技术之前，这些都是希望得到回答的重要问题。

1.1.1 本书的受众

本书面向那些正致力于构建用户界面或对其感兴趣的人。实际上，本书是写给任何对React感兴趣的人的，即使他们的工作并不涉及UI工程。如果有一些使用JavaScript构建前端应用的经验，读者将从本书获得最大收益。

只要了解JavaScript的基础并有一些构建Web应用的经验，就能学会如何用React构建应用。本书中不会涉及JavaScript的基础知识。诸如原型继承、ES2015以及之后版本的代码、强制类型转换、语法、关键字、类似async/await的异步编程模式和其他基础主题都不在本书的范围内。我只会稍微涉及一些与React特别相关的内容，但我不会将JavaScript作为一门语言来深入研究。

这并不意味着如果不了解JavaScript就不能学习React或者无法从本书中学到任何东西。但如果你学过JavaScript，那么将有更多收获。没有JavaScript的基础知识就贸然向前冲会让事情变得更加困难。可能会遇到这样的情况——对一些人来说事情看起来就像“魔法”——事情可以奏效，但这些人却不理解为什么。这通常会伤害开发者而不是帮助他们，所以……最后的警告是：在学习React之前要先熟悉JavaScript的基础知识。JavaScript是一种富有表现力和灵活性的语言，你会爱上它的！

你可能已经很熟悉JavaScript，甚至之前已经尝试过React。考虑到React已经变得如此流行，这并不会让人太过惊讶。如果就是这样，那么你将能够更深入地理解React的一些核心概念。但是，如果你已经使用了一段时间React，我可能不会涉及你可能正在寻找的非常特定的主题。对于这类读者，可以看看其他React相关的书籍，如React Native in Action。

你可能不属于（上述）任何一类，只想对React有一个高层概览，那么本书对你同样适用。你将了解React的基本概念，并接触用React编写的示例应用。你将通过实践了解构建React应用的基础知识，以及它如何适用于你的团队或下一个项目。

1.1.2 工具说明

如果过去几年你已在前端应用上做了大量工作，那么就不会对这一事实感到惊讶——围绕应用的工具已经成为开发过程中与框架和库本身同样重要的一部分。今天，开发人员可能会在应用中使用Webpack、Babel或其他工具。这些工具和其他工具在本书中占据什么位置？你需要知道哪些东西呢？

你并不需要精通Webpack、Babel或其他工具就能阅读这本书。我创建的示例应用使用了为数不多的重要工具，你可以通过阅读示例应用中的配置代码来了解这些工具，但我在本书中不会深入介绍这些工具。工具变化的速度很快，更重要的是，深入讨论这些主题将远远超出本书的范围。当工具与我们的讨论相关时，我一定会提示，但除此以外我将避免涉及它。

我还觉得，学习像React这样的新技术时，工具可能会让人分心。你已经试着让自己的思维转换到一套新的概念和范例，为什么还要学习复杂的工具来扰乱它呢？这就是为什么第2章要先着重学习“原生”React，然后再介绍那些需要构建工具的特性，如JSX和JavaScript语言的一些特性。你需要熟悉的一个工具是npm。npm是JavaScript的包管理工具，我们将使用它安装项目依赖并在命令行运行项目命令。你可能对npm已经很熟悉了，但如果没有，不要因此而放弃阅读本书。你只需要最基本的命令行和npm技能就能继续。

1.1.3 谁在使用React

当涉及开源软件时，谁使用它（以及谁不使用它）不只是关乎流行的问题。它影响使用该技术的体验（包括支持、文档和安全修复的可用性）、社区的创新水平，以及某个工具的潜在生命周期。那些有着活跃社区、健壮生态以及各种各样的贡献者经验和背景的工具，使用起来通常会更有趣、更容易，总体上也更顺利。

React最初是一个小项目但现在广受欢迎并已经拥有了活跃的社区。没有社区是完美的，React社区也不例外，但就开源社区而言，它具有许多成功的要素。此外，React社区还包含其他较小的开源社区的子集。这令人生畏，因为React生态系统看起来非常庞大，但它也使社区更加健壮和多样。图1-2展示了一张React生态系统的地图。在本书的整个过程中，我提到了各种各样的库和项目，如果想要更多地了解React生态系统，我整理了一份指南放在我的博客上。我将持续更新它并确保它随生态系统演进。

虽然开源（项目）可能是开发人员与React互动的主要方式，但你可能每天都在使用React开发的应用。许多公司以令人兴奋的不同方式使用React，下面是使用React来为其产品助力的一些公司：

• Facebook；

• Netflix；

• New Relic；

• Uber；

• Wealthfront；

• Heroku；

• PayPal；

• BBC；

• Microsoft；

• NFL；

• Asana；

• ESPN；

• Walmart；

• Venmo；

• Codecademy；

• Atlassian；

• Asana；

• Airbnb；

• Khan Academy；

• FloQast；

• 还有更多！

这些公司不会盲目地追随JavaScript社区的趋势。他们有特殊的工程要求——影响到大量用户并且必须在严格的期限内交付产品。有人说，“我听说React不错；我们应该React化一切”，这种说法并不能打动经理们和其他的工程师们。公司和开发人员想要好工具来帮助他们更好地思考和快速行动，以便他们能够构建高强度、可伸缩和可靠的应用。