React
React 无状态组件
无状态组件是一个纯函数：接收 props，返回 React 元素，不持有内部 state、无生命周期方法、无副作用。
function Welcome({ name }: { name: string }) {
return <h1>Hello, {name}</h1>
}一、核心特点
- 只依赖 props，不使用 state
- 没有生命周期方法
- 不使用
this - 相同输入永远得到相同输出（可预测）
二、常见使用场景
| 场景 | 说明 |
|---|---|
| 展示型组件 | 纯 UI 渲染，数据完全由父组件传入 |
| 列表项 | 每项结构相同，仅数据不同 |
| 基础 UI | Button、Tag、Avatar 等原子组件 |
| 布局组件 | Header、Footer、Sidebar 等容器结构 |
三、代码示例
展示型组件：
function UserInfo({ name, email }: { name: string; email: string }) {
return (
<div>
<p>Name: {name}</p>
<p>Email: {email}</p>
</div>
)
}列表项：
function ListItem({
title,
description,
}: {
title: string
description: string
}) {
return (
<li>
<h3>{title}</h3>
<p>{description}</p>
</li>
)
}四、性能优化
无状态组件渲染开销小，配合 React.memo 可避免父组件更新时的不必要重渲染：
import { memo } from 'react'
const Button = memo(function Button({
label,
onClick,
}: {
label: string
onClick: () => void
}) {
return <button onClick={onClick}>{label}</button>
})
memo对 props 做浅比较，props 不变则跳过渲染。
五、总结
无状态组件本质是纯函数，只接收 props、返回 JSX，不含 state 和生命周期。适合展示型组件、原子 UI 组件等场景。可配合
React.memo做性能优化，避免无效重渲染。