React学习笔记

，有一个标题

和一个（缩写的）有序列表

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

、

等。

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


  
    
    Docs

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

2.定义一个组件

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

export default function Profile() {
  return (
    
  )
}

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

2.1.步骤1：导出组件

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

2.2.步骤2：定义函数

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

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

2.3.步骤3：添加标记

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

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

return ;

但是，如果你的标记与return关键字不在相同的行时，你必须用一对括号将它包裹起来：

return (
  
    
  
);

注意点：如果没有括号，return后面的任何代码都会被忽略！

3.使用组件

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

function Profile() {
  return (
    
  );
}

export default function Gallery() {
  return (
    
      Amazing scientists
      
      
      
    
  );
}

3.1.浏览器看到的是

请注意大小写的差异：

是小写的，所以 React 知道我们引用的是一个 HTML 标签。
以大写字母 P 开头，所以 React 知道我们要使用叫做 Profile 的组件。

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


  Amazing scientists

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 函数，除了：

它们的名称始终以大写字母开头
它们返回 JSX 标记

React学习笔记

你的第一个UI组件

1.组件：UI 构建块

My First Component