跳到主要内容

class组件逻辑复用有哪些问题

面试速答​

  • class 时代不是不能复用逻辑，而是复用手段代价比较高。
  • 常见方式有 HOC、render props、mixin，但都会带来额外问题：
    • 包装层级变深
    • 数据来源不直观
    • 命名冲突
    • 生命周期耦合复杂

一、HOC 的问题​

HOC 会把一个组件再包一层甚至多层：

export default withAuth(withTrack(withTheme(Page)))

这会带来：

  • wrapper hell
  • 调试栈更长
  • props 来源不清
  • 静态属性、ref 透传处理麻烦

二、render props 的问题​

render props 确实能复用逻辑，但容易出现：

  • JSX 嵌套层级深
  • 可读性下降
  • 多个 render props 组合时结构臃肿

三、mixin 的问题​

mixin 更老，问题也最典型：

  • 命名污染
  • 来源不透明
  • 隐式依赖重
  • 生命周期冲突

所以后来基本被主流 React 放弃。

四、为什么 class 时代复用更别扭​

因为逻辑通常和下面这些东西绑得比较死：

  • this
  • 生命周期方法
  • 实例成员

导致很多逻辑不是“函数式组合”，而是“实例能力注入”，扩展性会差。

标准答法​

问：class 组件逻辑复用最大的问题是什么？​

答：可以复用，但代价高。HOC 容易造成包装地狱，render props 容易嵌套臃肿，mixin 会带来命名污染和隐式冲突，本质上都不如 Hooks 的函数式组合自然。

易错点​

  • 只答 HOC 一个点，不够全面。
  • 把 render props 说成“没有问题，只是写法不同”。
  • 忽略生命周期和 this 对逻辑组织的限制。

速记要点​

  • class 复用靠 HOC/render props/mixin。
  • 主要问题是层级深、来源乱、冲突多。
  • 本质上不如 Hooks 组合式逻辑清晰。