React 组件基础

本章节将介绍 React 组件的基础知识，包括函数组件和类组件。

什么是组件？

组件是 React 的核心概念，它允许将 UI 拆分为独立可复用的部分。

组件就像乐高积木，每个积木可以单独构建，然后组合在一起形成完整的应用。

函数组件

函数组件是最简单和推荐的方式：

function Welcome() {
  return <h1>你好，React！</h1>;
}

完整示例：

// App.jsx
import "./App.css";

function Welcome() {
  return (
    <div className="welcome">
      <h1>你好，React！</h1>
      <p>欢迎学习 React 组件</p>
    </div>
  );
}

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

带参数的函数组件

function Greeting({ name, age }) {
  return (
    <div>
      <h1>你好，{name}！</h1>
      <p>你今年 {age} 岁了</p>
    </div>
  );
}

// 使用组件
<Greeting name="张三" age={20} />
<Greeting name="李四" age={25} />

组件的返回值

组件必须返回一个根元素，可以使用 <> 简化：

function Message() {
  return (
    <>
      <h1>标题</h1>
      <p>内容</p>
    </>
  );
}

类组件

类组件是早期的写法，现在推荐使用函数组件：

import { Component } from "react";

class Welcome extends Component {
  render() {
    return <h1>你好，React！</h1>;
  }
}

类组件示例：

import { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>计数: {this.state.count}</p>
      </div>
    );
  }
}

组件的 props

props 是传递给组件的数据：

// 父组件
function App() {
  return (
    <UserCard name="张三" age={20} city="北京" />
  );
}

// 子组件
function UserCard({ name, age, city }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>年龄: {age}</p>
      <p>城市: {city}</p>
    </div>
  );
}

默认 props

function UserCard({ name = "匿名", age = 0 }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>年龄: {age}</p>
    </div>
  );
}

props 的只读性

props 是只读的，不能在组件内部修改：

// 错误：不能修改 props
function Component({ value }) {
  value = "新值"; // 错误！
  return <div>{value}</div>;
}

组件的组合

组件可以嵌套使用：

function Header() {
  return <header>网站头部</header>;
}

function Footer() {
  return <footer>网站底部</footer>;
}

function Content() {
  return <main>主要内容</main>;
}

function App() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

组件的样式

1. CSS 文件

/* App.css */
.container {
  padding: 20px;
}

.title {
  color: blue;
}

// App.jsx
import "./App.css";

function App() {
  return (
    <div className="container">
      <h1 className="title">标题</h1>
    </div>
  );
}

2. 内联样式

function App() {
  const styles = {
    container: {
      padding: "20px",
      backgroundColor: "#f5f5f5"
    },
    title: {
      color: "blue",
      fontSize: "24px"
    }
  };

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>标题</h1>
    </div>
  );
}

3. CSS Modules

/* Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}

// Button.jsx
import styles from "./Button.module.css";

function Button() {
  return <button className={styles.button}>按钮</button>;
}

导出和导入组件

命名导出

// components/Header.jsx
export function Header() {
  return <header>头部</header>;
}

export function Footer() {
  return <footer>底部</footer>;
}

// 使用
import { Header, Footer } from "./components/Header";

默认导出

// components/Button.jsx
function Button() {
  return <button>按钮</button>;
}

export default Button;

// 使用
import Button from "./components/Button";

组件的注意事项

1. 组件名必须大写

// 正确
function MyComponent() {
  return <div>内容</div>;
}

// 错误：小写会被当作 HTML 元素
function myComponent() {
  return <div>内容</div>;
}

2. 所有组件必须返回 JSX

// 正确
function Component() {
  return <div>内容</div>;
}

// 错误：不能返回多个根元素
function Component() {
  return <div>1</div><div>2</div>;
}

// 解决：使用 Fragment
function Component() {
  return (
    <>
      <div>1</div>
      <div>2</div>
    </>
  );
}

3. 保持组件简洁

// 好的写法：单一职责
function UserInfo({ user }) {
  return (
    <div>
      <UserAvatar avatar={user.avatar} />
      <UserName name={user.name} />
      <UserBio bio={user.bio} />
    </div>
  );
}

小结

本章我们学习了：

1. 什么是组件
2. 函数组件的定义和使用
3. 类组件的基本写法（了解即可）
4. props 的使用
5. 组件的组合和嵌套
6. 组件的样式方法
7. 组件的导出导入

练习

1. 创建一个显示学生信息的组件
2. 创建一个按钮组件，支持自定义文本和点击事件
3. 创建一个卡片组件，包含标题、图片和描述
4. 创建一个文章列表组件，显示多篇文章