组件
01-react2026/11/14
组件概念
组件是 React 应用的构建块，分为两种类型：
函数组件（推荐）
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
类组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
组件 Props
Props 基础使用
// 定义组件
function UserCard(props) {
return (
<div className="user-card">
<h2>{props.name}</h2>
<p>年龄: {props.age}</p>
<p>邮箱: {props.email}</p>
</div>
);
}
// 使用组件
function App() {
return (
<div>
<UserCard name="张三" age={25} email="zhangsan@example.com" />
<UserCard name="李四" age={30} email="lisi@example.com" />
</div>
);
}
Props 解构
// 直接解构
function UserCard({ name, age, email, children }) {
return (
<div>
<h2>{name}</h2>
<p>年龄: {age}</p>
<p>邮箱: {email}</p>
{/* children 特殊 prop */}
<div className="content">{children}</div>
</div>
);
}
// 设置默认值
function UserCard({ name = "匿名用户", age = 0, email = "未设置", isAdmin = false }) {
return (
<div>
<h2>
{name} {isAdmin && "(管理员)"}
</h2>
<p>年龄: {age}</p>
<p>邮箱: {email}</p>
</div>
);
}
Props 类型检查
import PropTypes from "prop-types";
function UserCard({ name, age, email }) {
// 组件内容
}
UserCard.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
email: PropTypes.string,
isAdmin: PropTypes.bool,
hobbies: PropTypes.arrayOf(PropTypes.string),
onUpdate: PropTypes.func,
address: PropTypes.shape({
city: PropTypes.string,
street: PropTypes.string,
}),
};
UserCard.defaultProps = {
age: 0,
isAdmin: false,
};
TypeScript 类型定义
interface UserCardProps {
name: string;
age?: number;
email: string;
isAdmin?: boolean;
onUpdate?: (id: number) => void;
children?: React.ReactNode;
}
const UserCard: React.FC<UserCardProps> = ({
name,
age = 0,
email,
isAdmin = false,
onUpdate,
children,
}) => {
return (
<div>
<h2>{name}</h2>
<p>年龄: {age}</p>
{isAdmin && <span>管理员</span>}
{children}
</div>
);
};
组件 State
函数组件中使用 State（useState Hook）
import { useState } from "react";
function Counter() {
// 基本使用
const [count, setCount] = useState(0);
// 对象 state
const [user, setUser] = useState({
name: "张三",
age: 25,
});
// 数组 state
const [items, setItems] = useState(["item1", "item2"]);
// 函数式更新
const increment = () => {
setCount(prevCount => prevCount + 1);
};
// 更新对象（保持其他属性不变）
const updateName = () => {
setUser(prev => ({
...prev,
name: "李四",
}));
};
// 更新数组
const addItem = () => {
setItems(prev => [...prev, `item${prev.length + 1}`]);
};
return (
<div>
<p>计数: {count}</p>
<button onClick={increment}>增加</button>
<button onClick={() => setCount(count - 1)}>减少</button>
<p>用户名: {user.name}</p>
<button onClick={updateName}>修改名字</button>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
<button onClick={addItem}>添加项目</button>
</div>
);
}