第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应用的核心方面。

让我们来看看各个部分。

• 组件——封装的功能单元，这是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、移动端或原生平台。