第2章 <Hello World/>：我们的第一个组件

本章主要内容

• 使用组件思考用户界面

• React中的组件

• React如何渲染组件

• React中创建组件的不同方式

• 在React中使用JSX

第1章主要从理论方面探讨了React。如果你是“show me the code!”的那类人，那本章就是为你准备的。我们将在本章近距离审视React。随着我们学习React的一些API，我们将创建一个简单的评论框，这将有助于读者理解React的实际运行机制并开始固化有关React工作方式的思维模型。一开始，我们不会使用任何“语法糖”或可能隐藏底层技术的便利措施来构建React组件。在本章最后，我们将探讨JSX（一个轻量级标记语言，它有肋于我们更容易地创建React组件）。后面几章的内容会更复杂，我们将了解一下如何用React组件创建一个完整的应用程序（Letters Social），但在本章中，我们将把范围限制在几个相关的组件上。

在深入探索之前，让我们再简要地了解一下React以确定自己学习的方向。图2-1概括了大多数React应用的核心方面。

图2-1 这是从较高层面看到的React，可能你在第1章就见过了。通过React，可以使用组件构建用户界面，这些界面可以运行在浏览器上以及iOS和Android这样的原生平台上。React不是一个综合性框架——它允许开发人员自由选择用于数据建模、样式、HTTP调用等的库。可以在浏览器中运行React应用，并借助React Native在移动设备上运行React应用

让我们来看看各个部分。

• 组件——封装的功能单元，这是React的基本单元。这些就是制作视图的东西。它们是JavaScript的函数或类，它们接收属性作为输入并维护自己的内部状态。React为某些类型的组件提供了一组生命周期方法，这样就可以将其挂载到不同的组件管理步骤中。

• React库——React应用基于React库运行。React的核心库（react）由react-dom和react-native支持。React DOM处理浏览器或服务器端环境中的渲染，React Native则提供了原生绑定，这意味着可以为iOS或Android创建React应用。

• 第三方库——React不会就数据建模、HTTP调用、样式的特定领域（如外观和感觉）或应用的其他方面将观念强加给开发人员。对于这些，使用者可以根据自己的意愿来集成其他技术构建应用。并不是所有库都与React兼容，但是有很多方法可以将它们中的大多数与React集成在一起。我们将在第4章、第10章和第11章探讨如何在React应用中使用非React代码。

• 运行React应用——由组件创建的React应用运行在你选择的平台上：Web、移动端或原生平台。