组件基础

组件是 React 的核心概念之一。它们让你可以将 UI 拆分为独立、可复用的部分，并单独考虑每个部分。

定义组件

传统上，组件被定义为 JavaScript 类。然而，随着 React Hooks 的引入，函数组件成为了更简单和更强大的方式。

这就是一个函数组件：

TypeScript

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

这个函数是一个有效的 React 组件，因为它接收唯一带有数据的 “Props”（属性）对象并返回一个 React 元素。这类组件被称为函数组件，因为它们字面上就是 JavaScript 函数。

你可以在一个文件中声明多个组件，但文件会变得很拥挤。因此，通常会将每个组件声明在各自的文件中。

TypeScript

// Button.js
export default function Button() {
  return (
    <button>
      点击我
    </button>
  );
}

TypeScript

// App.js
import Button from './Button.js';

export default function App() {
  return (
    <div>
      <Button />
    </div>
  );
}

提示

使用默认导出（export default）可以让你使用更短的导入语法。但你也可以使用命名导出（export），如果你需要从一个文件导出多个组件。

JSX 是 JavaScript 的语法扩展，让你可以在 JavaScript 文件中编写类似 HTML 的标记。它在 React 中被广泛使用。

组件必须返回一个单一的根元素。这个根元素可以有多个子元素。

TypeScript

// ✅ 正确
return (
  <div>
    <h1>标题</h1>
    <p>段落</p>
  </div>
);

// ❌ 错误
return (
  <h1>标题</h1>
  <p>段落</p>
);

如果你不想在 DOM 中添加额外的 <div>，可以使用 Fragment（<>）：

TypeScript

return (
  <>
    <h1>标题</h1>
    <p>段落</p>
  </>
);

在 JSX 中，每个标签都必须关闭。自闭合标签需要以 /> 结尾。

TypeScript

// ✅ 正确
<img src="avatar.jpg" alt="头像" />

// ❌ 错误
<img src="avatar.jpg" alt="头像">

大多数 React 属性使用 camelCase 命名，而不是 HTML 的 kebab-case。

TypeScript

// HTML
<input class="input-field" />

// JSX
<input className="input-field" />

现在你已经了解了组件的基础知识，接下来可以学习：