平时使用React比较少,但是最近在搞Lexical编辑器,不得不系统学习一遍React。最近React官方文档进行了升级,体验变得更好了。打算从官方文档开始学习,每天发一篇官方文档的翻译,用一个月的业余时间系统学一遍。
言归正传
你的第一个UI组件
组件是React的核心概念之一,它们是构建用户界面(UI)的基础,这使它们成为开始学习React的理想起点!
你将学习以下内容:
什么是组件
组件在React应用中扮演的角色
如何编写你的第一个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函数。
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 函数,除了:
它们的名称始终以大写字母开头
它们返回 JSX 标记