组件抽象问题请教，用 mixin 还是组合抽象

[ele828]

我有若干组件，要给这些组件都新增一些公共的功能，应当使用 mixin 还是组合的来设计呢？

Mixin:

// 伪代码

ComponentA mixin SuperPower

ComponentB mixin SuperPower

ComponentC mixin SuperPower

然后直接使用 <ComponentA />, <ComponentB />, <ComponentC />

还是用组合来复用：

<SuperPower>
  <ComponentA />
</SuperPower>

<SuperPower>
  <ComponentB />
</SuperPower>

<SuperPower>
  <ComponentC />
</SuperPower>

另，mixin 上有一些属性需要被继承。 例如：

<ComponentA super-power-property="123" />

或通过组合：

<SuperPower property="123">
<ComponentA />
</SuperPower>

补充下，不是 react 或 vue 框架，目前只有以上两种选择。Component 是对外开放的组件库里的一些组件，不是在自己代码内部使用的。

[u2r1Hqo6HExmNsrt]

同楼主同样有疑问，mixin 跟普通的继承、组合有什么不同？我学 dart ，研究来研究去，发现好像也就给多重继承加多了一个继承顺序。

[4ark]

你们用什么框架？还是不用？
其实目前来看这两种方案都不是最优的，建议了解下 React Hooks

[TomVista]

抄作业吧 react/vue hook

[ele828]

@4ark 内部框架，目前只有这两种做法。hooks 目前是不支持的

[4ark]

@ele828 感觉你们在走老路，既然 mixin 都抄了，那抄个 hooks 也行啊

[ele828]

@4ark 嗯，hooks 确实是一种解法，不过暂时可能比较难推进

[zhuangzhuang1988]

hook 也不好.

[murmur]

hooks 是每个变量都要自己去优化，框架不管了，比起这个我还是喜欢 vue 帮我优化这些

[anjianshi]

建议尽量不要用 mixin ，除非是加一些底层特性例如给每个组件加个通用的异常捕获啥的。
因为 mixin 不直观，一旦应用复杂起来很难维护，遇到问题也不容易找出到底是哪个组件加进来的哪个 mixin 导致的问题。

[murmur]

@anjianshi vue webpack 早就支持 mixin 打断点了，都什么年代了还在纠结调试问题

[ele828]

@anjianshi 我个人也是不倾向于用 mixin

[darknoll]

非常不喜欢 mixin ，后期维护的时候容易一头雾水

[maplelin]

不推荐 mixin ，感知性太差，mixin 中引入的方法和变量在引入 mixin 的组件中不可感知，一旦 mixin 发生错误，定位问题的麻烦程度直接翻倍