My App

组件

组件

组件是 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 逻辑的方法!我们将在接下来的模块中详细学习它们。)

On this page