函数式组件在无实例化开销的纯展示场景下性能更优，但需避免重复计算和频繁变化的props；普通组件通过优化同样高效，关键在于匹配设计意图。
函数式组件在特定条件下确实性能更好，但“更好”不等于“绝对更快”，关键看怎么用、用在哪儿。
无实例化开销，渲染起点更轻
普通组件每次渲染都要创建实例（初始化 data、methods、生命周期钩子等），而函数式组件跳过这整套流程——它就是一个纯函数调用，只接收 props 和 context，直接返回 VNode。这意味着：
• 内存占用更低
• 初始化时间更短
• 没有 this 绑定、响应式系统追踪、watcher 创建等额外开销
尤其在高频渲染场景（比如成百上千项的列表项、图标、标签、标题），这点差异会叠加放大。
但性能优势不是自动生效的
函数式组件本身只是“更轻的壳”，实际渲染效率还取决于内部逻辑：
- 如果函数体里做了大量重复计算（比如每次渲染都 filter/sort 大数组），再轻的壳也扛不住
- 如果 props 频繁变化且未做控制（如传入匿名对象、函数），React/Vue 无法复用上次结果，memo 或 shouldComponentUpdate 就失效了
- Vue 中函数式组件不支持 v-model、.sync 语法糖，强行模拟可能引入冗余逻辑
普通组件也能做到同样高效
现代框架对两类组件都有成熟优化路径：
- React：类组件可用 PureComponent 或 shouldComponentUpdate；函数组件可用 React.memo + useMemo/useCallback
- Vue：普通组件可通过 v-once、计算属性缓存、合理使用 key、避免响应式穿透等方式大幅减少更新
一个写得严谨的普通组件，性能完全可以媲美甚至超过滥用函数式组件的实现。
真正决定性能的，是设计意图是否匹配
函数式组件天然适合：
• 纯展示、无交互的 UI 片段（如 Avatar、Badge、Icon）
• 高阶组件或动态代理（如 withLoading、ComponentSwitcher）
• 需要极致轻量和可预测性的底层封装
而需要本地状态、复杂副作用、精细生命周期控制的场景，硬套函数式组件反而增加心智负担和潜在 bug（比如闭包陷阱、依赖遗漏）。
