组件

组件是 React 的一个重要部分。如果你对 React 只知道一件事，你可能知道它是一个基于组件的框架。

组件是什么，确切地说？这是我喜欢定义它们的方式：组件是一组标记、样式和逻辑的捆绑，控制用户界面特定部分的所有内容。t

在代码组织方面，这是一个不同的思维模型。我们将应用程序组织成组件，而不是将其分为标记（用 HTML 编写）、样式（用 CSS 编写）和逻辑（用 JS 编写）。

有一幅可爱的图形，我认为它很好地说明了这一点：

separation-of-concerns

这张精彩的图片归功于 Cristiano Rastelli 。

重用机制

传统的 HTML 实际上没有一种重用标记块的方法。许多语言会使用部分文件来实现这一点。"Partial" 是可以插入到另一个 HTML 文档中的 HTML 块。

在 CSS 中，我们用于重用的主要机制是类。例如，我们可能会创建一个标准的“button”样式，在 btn 类别下。

.btn {
  padding: 8px 32px;
  background: blue;
  border: none;
  font-size: 1rem;
}

每当我们想要将这组样式应用于 HTML 元素时，我们可以将 btn 类添加到它上面。

对于 JavaScript 而言，重用机制是函数。也许我们有一个函数以某种方式处理数据：

function shout(sentence) {
  return sentence.toUpperCase() + "!!";
}
 
shout("we're off to see the wizard");
// -> "WE'RE OFF TO SEE THE WIZARD!!"

使用 React，组件是主要的重用机制。我们不是使用 HTML 的局部文件、CSS 的类和 JavaScript 的函数，而是创建一个将所有三者打包在一起的组件，允许我们创建一个高级可重用 UI 元素库。

这个想法真的非常强大。习惯于以组件的方式思考需要一些时间，但一旦你做到这一点，你就再也不想在没有它们的项目上工作了。

(现代 React 还具有 hooks，这提供了一种重用 React 逻辑的方法！我们将在接下来的模块中详细学习它们。)