函数组件是 React 中定义组件最直接的方式。它本质上就是一个普通的 JavaScript 函数，接收一个参数对象（Props）并返回一个 React 元素（通常是 JSX）。React 16.8 推出 Hooks 后，函数组件拥有了完整的状态管理和副作用处理能力，彻底取代了类组件成为首选写法。
函数组件的基本结构
一个最简单的函数组件长这样：
function Welcome() {
return <h1>欢迎使用 React</h1>;
}它接受 Props 时同样简洁：
function Welcome({ name }) {
return <h1>欢迎，{name}！</h1>;
}
// 使用
<Welcome name="小明" />函数组件遵循“输入 Props，输出 UI”的纯粹映射关系。React 会在状态变化时重新调用该函数，生成新的 UI 描述并高效更新 DOM。
函数组件 vs 类组件：为什么函数组件是主流
在 React 16.8 之前，类组件是唯一能使用状态和生命周期的方式，函数组件只能做无状态的展示。Hooks 的出现改变了这一切。现在，函数组件相比于类组件有几个明显优势：
1. 代码更简洁
同样的计数器组件，两种写法对比一目了然：
// 类组件
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
}
render() {
return <button onClick={this.increment}>{this.state.count}</button>;
}
}
// 函数组件 + Hooks
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}函数组件消除了 this、构造函数和 render 方法，代码量减少近一半。
2. 更容易理解与测试
函数组件只是纯函数（当不使用副作用时），给定相同的 Props 和状态，渲染结果一定相同。这种可预测性让单元测试变得异常简单，无须模拟复杂的类实例行为。
3. 更灵活的逻辑复用
类组件中，跨组件复用状态逻辑只能通过高阶组件或 render props，容易形成“嵌套地狱”。Hooks 允许你在不修改组件结构的情况下提取复用的逻辑函数。比如，从任何需要获取窗口宽度的组件中抽出 useWindowSize Hook，一行代码即可复用。
4. 与现代 React 特性天然兼容
React 18 的并发渲染、自动批处理、Suspense 增强，以及未来的 React Server Components，都以函数组件为设计基础。类组件将逐渐不再获得新的官方特性支持。
函数组件的使用要点
1. 函数组件必须返回有效的 React 元素
可以返回 JSX、null（不渲染任何内容）、字符串或数组（需要加 key）：
function Optional({ show }) {
if (!show) return null;
return <p>展示内容</p>;
}
function List({ items }) {
return items.map(item => <li key={item.id}>{item.text}</li>);
}2. Props 是只读的
绝对不能直接修改 Props 的值。函数组件接收的 Props 对象应被视为只读，如果需要根据 Props 派生状态，应在 Hooks 内部处理。
3. 组件名必须以大写字母开头
React 通过大小写区分原生的 HTML 标签（小写）和自定义组件（大写）。如果函数名以小写开头，React 会将其当作普通 HTML 标签，导致渲染异常。
函数组件的命名方式
常见的命名方式有两种：函数声明和箭头函数。团队内部应统一风格。
// 函数声明（通常更有可读性）
function Greeting({ name }) {
return <h1>Hello, {name}</h1>;
}
// 箭头函数（更短，适合简单组件）
const Greeting = ({ name }) => <h1>Hello, {name}</h1>;对于复杂组件，推荐使用函数声明方式，它在堆栈跟踪中更容易辨认，并且允许在文件内任意位置定义而不用担心提升问题。
小结
函数组件是现代 React 开发的基石。它简洁、强大、易于测试，与 Hooks 结合后完全取代了类组件的历史地位。无论你是刚接触 React 还是维护旧项目，都应将函数组件作为默认选择。