React 实际开发中：函数组件 vs 类组件使用场景对比

---

✅ 一句话总结

现代 React 开发优先使用函数组件 + Hooks，类组件仅在错误边界或历史兼容场景中使用。

---

✅ 函数组件适合的场景（现代推荐）

场景	理由
📦 新项目开发	写法简洁，官方推荐
📊 结构化 UI 组件（按钮、表格、弹窗）	易于组合和复用
🔁 多个组件复用逻辑	自定义 Hook 更清晰
🔄 需要响应副作用（请求、订阅等）	useEffect 覆盖所有生命周期
🧪 易测试	无需实例化，行为函数化

---

✅ 类组件适合的场景（少数情况）

场景	理由
🛑 错误边界处理（Error Boundaries）	目前只能使用类组件实现
🧬 历史项目维护	避免全量重构
🧩 第三方库依赖 class 生命周期	某些组件库未全面支持 Hook
🧪 使用 componentDidCatch, getDerivedStateFromError 等生命周期	仅类组件提供

---

✅ 对比表：函数组件 vs 类组件

特性	函数组件	类组件
写法风格	✅ 简洁	❌ 相对冗长
生命周期	✅ 使用 Hook	✅ 通过生命周期函数
状态管理	✅ useState/useReducer	✅ this.state/setState
逻辑复用	✅ 自定义 Hook	❌ 依赖 HOC/Render Props
错误边界支持	❌ 暂不支持	✅ componentDidCatch
学习成本	✅ 简单	❌ 需要理解原型与 this
推荐程度	✅ ✅ ✅	⚠️ 仅限特殊用途

---

✅ 推荐使用策略

场景	推荐组件类型	理由
新项目功能开发	✅ 函数组件	简洁、灵活、官方推荐
表单、列表、交互逻辑	✅ 函数组件	可用 Hook 管理状态
错误边界捕获	⚠️ 类组件	目前只能用 class 组件实现
维护老项目	类组件	避免大规模改动
可复用逻辑封装	✅ 函数组件	自定义 Hook 更自然

---

🧠 面试建议回答模板

在 React 项目中，我们默认使用函数组件和 Hook 来组织逻辑，因为它们语法更清晰、逻辑更容易复用。类组件仅在处理错误边界或维护旧代码时使用。

---