React有状态组件 与 无状态组件 有何不同？?它们的优缺点和使用场景是什么？

【概念释义】

有状态组件（class 或带 useState/useReducer 的函数组件）内部维护 state，可响应交互；无状态组件（展示组件）仅接收 props 渲染，逻辑简单、易测试、易复用。React 19 时代函数组件 + Hooks 统一，「无状态」常指纯函数式展示组件，状态用 Hooks 也不矛盾。

【基础使用】

"qb-hl-comment">// 无状态（展示）
function Avatar({ src, alt }) {
  return <img src={src} alt={alt} className="avatar" />;
}

"qb-hl-comment">// 有状态