React的组件学习

╰半夏微凉° 2024-02-20 11:11 23阅读 0赞

## React的组件学习 ##

参考资料：https://zh-hans.react.dev/learn/your-first-component

### 一、定义组件 ###

export default function Profile() {
      return (
        <img
          src="https://i.imgur.com/MK3eW3Am.jpg"
          alt="Katherine Johnson"
        />
      )
    }

以下是构建组件的方法：

#### 第一步：导出组件 ####

`export default` 前缀是一种 [JavaScript 标准语法][JavaScript]（非 React 的特性）。它允许你标签一个文件中的主要函数以便你以后可以从其他文件引入它。欲了解更多关于导入的内容，请参阅 [组件的导入与导出][Link 1] 章节！

#### 第二步：定义函数 ####

使用 `function Profile() { }` 定义名为 `Profile` 的 JavaScript 函数。

#### 陷阱 ####

React 组件是常规的 JavaScript 函数，但 **组件的名称必须以大写字母开头**，否则它们将无法运行！

#### 第三步：添加标签 ####

这个组件返回一个带有 `src` 和 `alt` 属性的 `<img />` 标签。`<img />` 写得像 HTML，但实际上是 JavaScript！这种语法被称为 [JSX][]，它允许你在 JavaScript 中嵌入使用标签。

返回语句可以全写在一行上，如下面组件中所示：

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

但是，如果你的标签和 `return` 关键字不在同一行，则必须把它包裹在一对括号中，如下所示：

return (
      <div>
        <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
      </div>
    );

#### 陷阱 ####

没有括号包裹的话，任何在 `return` 下一行的代码都 [将被忽略][Link 2]！

### 二、使用组件 ###

现在你已经定义了 `Profile` 组件，你可以在其他组件中使用它。例如，你可以导出一个内部使用了多个 `Profile` 组件的 `Gallery` 组件：

function Profile() {
      return (
        <img
          src="https://i.imgur.com/MK3eW3As.jpg"
          alt="Katherine Johnson"
        />
      );
    }
    
    export default function Gallery() {
      return (
        <section>
          <h1>了不起的科学家</h1>
          <Profile />
          <Profile />
          <Profile />
        </section>
      );
    }

#### 浏览器所看到的 ####

注意下面两者的区别：

*  `<section>` 是小写的，所以 React 知道我们指的是 HTML 标签。
 *  `<Profile />` 以大写 `P` 开头，所以 React 知道我们想要使用名为 `Profile` 的组件。

然而 `Profile` 包含更多的 HTML：`<img />`。这是浏览器最后所看到的：

<section>
      <h1>了不起的科学家</h1>
      <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
      <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
      <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
    </section>

#### 嵌套和组织组件 ####

组件是常规的 JavaScript 函数，所以你可以将多个组件保存在同一份文件中。当组件相对较小或彼此紧密相关时，这是一种省事的处理方式。如果这个文件变得臃肿，你也可以随时将 `Profile` 移动到单独的文件中。你可以立即在 [关于引入的页面][Link 1] 中学习如何做到这些。

因为 `Profile` 组件在 `Gallery` 组件中渲染——甚至好几次！——我们可以认为 `Gallery` 是一个 **父组件**，将每个 `Profile` 渲染为一个“孩子”。这是 React 的神奇之处：你可以只定义组件一次，然后按需多处和多次使用。

[JavaScript]: https://developer.mozilla.org/docs/web/javascript/reference/statements/export
[Link 1]: https://zh-hans.react.dev/learn/importing-and-exporting-components
[JSX]: https://zh-hans.react.dev/learn/writing-markup-with-jsx
[Link 2]: https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi