Mixin在React.js中是有害的

16-07-15 banq
              

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一样非常能有深度。