简单不看版
    hooks => 可阅读性
    class => mixins冲突
    typescript class => hoc 冲突
    typescript class extends: good
    typescript class annotation: good
    typescript class method annotation: good

    总体上来讲,能力应该是在一个变成范式中的原子粒度的组合为最优。范式或类范式的定义要简单清楚固定。原子粒度的能力要灵活。hooks的最大问题就是为了引入原子粒度的组合能力,强行绑架了react生态,看似一体,内在割裂很严重。在面对非react环境代价比较大。相反class方案则只是一个基础的extends,是建立在class语法上的使用。所以再进行extends能力上的拓展就会比较适应人的思路理解。这一点上hooks是反模式的。
    另外hoc这种默认和class的继承也不太一致,hoc实现的缺乏规则,导致内部实现的混乱,可以正向继承、反向继承、不继承、修改原有继承……。所以hoc的这种能力应该回归到基础的class继承上,即extends。同时也不再破坏typescript的类型系统。
    mixins就不说的,本身的切面/插槽模式应应用在更大范围上,基础的单元化的内容不适合,这也是混乱的根源。
    反观,以annotation为代表的方法函数级别的封装,目前来看则是比较恰当的复用粒度。annotation可以连接react生态、也可以处理各种通用的问题,同时在视觉认知上并不会造成额外负担,更重要的是可以作为声明式的描述能力,以形容词的能力表达来组合描述业务能力。譬如事件穿透等在react能力内就无比蹩脚,不断涌出的recoil之类无非还是类hooks的能力模式,不如annotation。

    • 简单ui=》function
    • 复杂ui
      • component extend base.component extend react.component + annotation
      • page extend base.page extend react.component + annotation