1.4 组件：React的基本单元

React不只是用新颖的方式来处理数据随时间变化的问题，它还专注于将组件作为组织应用程序的范式。组件是React中最基本的单元。用React创建组件有几种不同的方法，后面的几章会介绍这些方法。以组件的方式思考不仅对于理解React的工作方式至关重要，而且对于理解如何在项目中更好地使用它也至关重要。

1.4.1 组件概览

什么是组件？这是一个更大的话题。人们可能已经很熟悉组件的概念了，并且可能经常看到它们，即使他们可能没有意识到这一点。在设计和构建用户界面时，使用组件作为思维和可视化工具能够得到更好、更直观的应用设计与使用。可以将任意东西作为组件，尽管并不是所有东西作为组件都有意义。举个例子，如果认定整个界面是一个组件，并且没有子组件或进一步细分，那么你可能并没有帮到自己。相反，将界面的不同部分分解成可以组合、复用和易于重组的部分是很有帮助的。

为了开始以组件的方式思考，我们将查看一个示例界面并将其分解为不同的组成部分。图1-6展示了一个将在后续部分使用的示例界面。用户界面通常包含一些能够在界面的其他部分复用的元素，即使它们没有被复用，它们至少是独特的。这些不同元素——界面的独特元素——可以被认为是组件。图1-6中左边的界面被分解为右边的组件。

 

练习1-1 组件思维

访问一个喜欢或常去的网站（如GitHub）并将其界面拆解成组件。当这样做的时候，你可能会发现自己把事物拆解成了不同的部分。那什么时候停止拆解呢？一个独立的字母应该作为一个组件吗？组件什么时候才算小呢？什么时候要将一组元素作为一个组件？

1.4.2 React中的组件：封装与复用

React组件具有良好的封装性、复用性和组合性。这些特性有助于为用户提供一种更简单、更优雅的方式来思考和构建用户界面。应用可以由清晰、简洁的分组组成，而不是像意大利面条那样一团乱。使用React来构建应用就像使用乐高积木来构建项目一样，不同的是构建应用时有取之不尽的“积木”。人们可能会遇到bug，但幸运的是不会踩到“积木”上。

在练习1-1中你实践了使用组件进行思考并将界面拆解成了组件。可以用很多方法来做这件事，并且这些方法可能没有特别的组织方式或惯例。这没关系。但是，当使用React中的组件时，考虑组件设计上的组织和一致性就非常重要了。需要设计独立的并且关注特定问题或一组相关问题的组件。

这有助于产生那种在应用中可移植的、逻辑分组的、易于移动和复用的组件。即使使用了其他库，设计良好的React组件也应该是相当独立的。将UI分解成组件可以让人更轻松地处理应用的不同部分。组件间的边界意味着功能和组织可以被良好地定义，而独立的组件则意味着它们可以更容易地被复用和移动。

React中的组件需要一起工作。这意味着可以将组件组合起来形成新的复合组件。组件组合是React最强大的部分之一。可以创建一个组件并让应用的其余部分复用它，这在大型应用中通常特别有帮助。如果身处一个大中型团队中，可以将组件发布到私有注册中心（npm或其他），其他团队可以很容易地将这些组件拉下来并将它们用到一个新的或已有的项目中。这可能不是一个适用于所有规模团队的场景，但即使是更小规模的团队也可以从React组件带来的代码复用中获益。

React组件的最后一个方面是生命周期方法。当组件经过其生命周期的不同时期时（挂载、更新、卸载等），可以使用这些可预测的、定义良好的方法。我们将在后面几章花很多时间在这些方法上。