Mixin在React.js中是有害的

Mixin是来自OO世界概念，而React.js是遵循函数式编程概念，在React编程中使用Mixin被认为是有害的。

Facebook官方发表了文章Mixins Considered Harmful | React，文章大意如下：

“如何在几个组件之间共享代码”是人们学习使用React常有的疑问，答案是使用组件组合实现重用，你能定义一个组件然后在其他几个组件中重复使用它即可。

但是，在实践中，Facebook发现事情没有这么简单，在实践中遭遇的问题普遍竟然是由Mixin引起的。虽然Mixin比组合模式更加智能，类似一种运行时组合的魔术模式。

Mixin有以下问题：

首先，Mixin容易被破坏，但是这不意味着Mixin模式本身不好，很多人已经成功应用它在很多语言和范式中，包括一些函数式编程，在Facebook广泛使用类似于Mixin的trait，但是Mixin在React代码中是没有必要和有问题的。

Mixin会引入隐式的依赖，一些组件依赖Mixin中定义的某个方法，比如getClassName(); 有时它是另外一种方式，Mixin调用方法像renderHeader()，Javascript是一个动态语言，难以面对这些依赖。

一个组件的render()方法也许引用了一些没有在类里面定义的方法，这个组件能够安全地迁移吗？我们需要到处寻找Mixin所有成员，打开每个文件，寻找在Mixin中被定义的方法。

如果Mixin又依赖其他Mixin，移除它们中一个就会引起连锁中断，这时需要一个依赖图库，但是不像组件，Mixin不会形成一个层次，它们被扁平化并在同一个命名空间中运行。

其次，Mixin会引起名称冲突，如果在FluxListenerMixin中定义了handleChange() ， WindowSizeMixin定义了handleChange()，你就不能一起使用它们。

如果你完全控制你的代码这不是一个问题，可以更名方法名称，但是如果Mixin来自第三方包，你就无法更名了。

再者，Mixin会引起滚雪球式的复杂性。Mixin开始很简单，但是会日益复杂。

那么如何从Mixin中迁移出来呢？Facebook针对不同情形代码提出了不同的解决方案。

这些方法总体来说比较复杂，对程序员要求水平极高，不是普通Javscript前端程序员就能完全掌握，看来React.js用起来也如Java/Scala一样非常能有深度。

Recommend