React学习笔记

平时使用React比较少，但是最近在搞Lexical编辑器，不得不系统学习一遍React。最近React官方文档进行了升级，体验变得更好了。打算从官方文档开始学习，每天发一篇官方文档的翻译，用一个月的业余时间系统学一遍。

言归正传

---

你的第一个UI组件

组件是React的核心概念之一，它们是构建用户界面(UI)的基础，这使它们成为开始学习React的理想起点！

你将学习以下内容：

1. 什么是组件

2. 组件在React应用中扮演的角色

3. 如何编写你的第一个React组件

1.组件：UI 构建块

在Web上，HTML让我们使用内置的标签，如<h1>和<li>，创建丰富的结构化文档：

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

这段标记表示一篇文章<article>，有一个标题<h1>和一个（缩写的）有序列表<ol>目录。这种标记结合CSS样式和JavaScript，构成了Web上每个侧边栏、头像、模态框、下拉菜单等UI组件的基础。

React允许你将标记、CSS和JavaScript组合成自定义的“组件”，用于你的应用中可重用的UI元素。你上面看到的目录代码可以被转换为一个<TableOfContents />组件，你可以在每个页面上呈现它。在底层，它仍然使用相同的HTML标记，如<article>、<h1>等。

就像使用HTML标记一样，你可以组合、排序和嵌套组件来设计整个页面。例如，你正在阅读的文档页面就是由React组件构成的：

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

随着你的项目不断发展，你会发现许多设计可以通过重用你已经编写的组件来组合，加速你的开发。我们上面的目录可以通过添加<TableOfContents />到任何屏幕上来实现！你甚至可以使用React开源社区共享的数千个组件（如Chakra UI和Material UI）来启动你的项目。

2.定义一个组件

在传统的网页开发中，网页开发人员首先标记他们的内容，然后通过添加一些JavaScript来增加交互性。当交互只是网页的一种额外功能时，这种方法很好用。但如今，对于许多站点和所有应用程序来说，交互性是必不可少的。React首先考虑交互性，同时仍使用相同的技术。React组件是一个JavaScript函数，您可以在其中添加标记。以下是示例（您可以编辑它）：

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

以下是如何构建一个组件：

2.1.步骤1：导出组件

export default前缀是标准的JavaScript语法（不仅适用于React），它允许你标记文件中的主要函数，以便稍后从其他文件中导入它。（更多关于导入组件的内容，请参阅导入和导出组件！）

2.2.步骤2：定义函数

使用function Profile() {}你可以定义一个名为Profile的JavaScript函数。

💡 注意点：React组件是常规的JavaScript函数，但它们的名称必须以大写字母开头，否则它们将无法正常工作！

2.3.步骤3：添加标记

该组件返回一个带有src和alt属性的<img/>标记。<img />看起来像是HTML，但它实际上是JavaScript！这个语法被称为JSX，它允许你在JavaScript中嵌入标记。

return语句可以写在一行上，就像这个组件一样：

return <img src="[https://i.imgur.com/MK3eW3As.jpg](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后面的任何代码都会被忽略！

3.使用组件

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

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

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

3.1.浏览器看到的是

请注意大小写的差异：

• 是小写的，所以 React 知道我们引用的是一个 HTML 标签。

• 以大写字母 P 开头，所以 React 知道我们要使用叫做 Profile 的组件。

Profile 包含更多的 HTML：。最终，浏览器看到的是：

<section>
  <h1>Amazing scientists</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>

3.2.1嵌套和组织组件

组件是普通的 JavaScript 函数，所以可以将多个组件保留在同一个文件中。当组件相对较小或紧密相关时，这非常方便。如果这个文件变得拥挤，您可以将 Profile 移动到单独的文件中。您将很快在导入页面中了解如何做到这一点。

因为 Profile 组件被渲染在 Gallery 中，甚至多次！我们可以说 Gallery 是父组件，每个 Profile 都被渲染为一个“子组件”。这是 React 的一部分魔力：您可以定义一个组件一次，然后在任意数量和任意位置使用它。

💡 注意点:组件可以呈现其他组件，但定义时不要嵌套：

export default function Gallery() {
  // 🔴 永远不要在另一个组件内部定义组件！
  function Profile() {
    // ...
  }
  // ...
}

上面的代码非常慢，会导致 bug。相反，应该在顶层定义每个组件：

export default function Gallery() {
  // ...
}

// ✅ Declare components at the top level
function Profile() {
  // ...
}

当子组件需要从父组件获取数据时，使用 props 来传递，而不是嵌套定义。

4.小结

你刚刚学习了 React 的基础知识！下面是一些关键点的总结：

• React 允许你创建组件，这是可重用的 UI 元素。

• 在 React 应用中，每个 UI 部分都是一个组件。

• React 组件是常规的 JavaScript 函数，除了：

1. 它们的名称始终以大写字母开头

2. 它们返回 JSX 标记