React组件抽象(一): mixin

React组件抽象(一)-Mixin

写业务组件的时候常常会有一些功能反复被不同的组件公用，这时候就需要取出相同部分功能，这个过程涉及组件抽象。抽象方式有许多种，如高阶组件（High-order components）和mixin。

一、MIxin是什么，为什么要使用Mixin

一些古老的面向对象的语言，如C++，有个很强大但是很危险的功能：多重继承。

多重继承

举个例子：
有个程序员写了一本书，那我们可以称这位程序员为作家。
以下例子使用类似JavaScript的语法，因为C++我已经忘记了。

class Person{
    name = "人类"
    writing(){
        // 用笔写字
    }
}
class Writer extends Person{
    name = "作家"
    writing(){
        // 写文章
    }
}
class Coder extends Person{
    name = "程序员"
    writing(){
        //写代码
    }
}

张三恰好是程序员作家，于是继承了两个类

class ZhangSan extends Writer,Coder{
    
}

那么问题来了，当张三writing的时候写代码还是写文章？这就是弊端二义性。如果类数量多了，那将会很难受。当然处理方法是有，主要是麻烦。Java等语言为了规避这么麻烦的事情又要使用继承，出了interface接口。

继承接口

Java允许继承多个接口，如

public class ZhangSan extends Person implements WriterInterface,CoderInterface{
    
}

接口内部不会有实现，子类必须实现interface的方法除非是Abstract。这样就防止了二义性的发生。
然而，其他一些语言引入了其他的方式：mixin

mixin

通过改变prototype的一些属性来给组件注入新的能力。
直接直接举个栗子吧

const mixin = (clazz,plugins) =>{
    Object.entires(clazz).forEach(plugin =>{
        const [key,value] = plugin;
        clazz.prototype[key] = value;
    })
    return clazz;
}
class Zhangsan {
    
}

const mixins = {
    writing(){
        // 写作
    }
}

const WriterZhangSan = mixin(Zhangsan,mixin);

// 是不是很像
//const WriterZhangSan = Object.assign(ZhangSan.prototype,mixin)

二、怎么在React中使用

React.createClass

官方预留接口

React.createClass({
    mixins:[mixins],
    render(){
        return <div>Hello World</div>
    }
})

注意：

• 多个mixin如果有相同name的实现会报错，并不会后面的覆盖前面的。
• 定义生命周期如componentDidMount的mixin,并不会覆盖组件方法，而是两个方法都会执行

import createClass from "create-react-class"
const MixinDemo = createClass({
  mixins: [{
    componentDidMount() {
      console.log("mixin")
    }
  }],
  componentDidMount(){
    console.log("Demo")
  },
  render() {
    return <div>123</div>
  }
})
// minxin
// Demo

ES6 class & ES7 decorator :类语修饰器

const mixin = (...mixins) => {
  return target =>{
    mixins.forEach(mixin =>{
      Object.assign(target.prototype,mixin)
    })
    return  target;
  }
}
const didMountSayHello = {
  componentDidMount(){
    console.log("Hello World")
  }
}

@mixin(didMountSayHello)
class MixinDemo extends React.Component{
  render(){
    return <div>2333</div>
  }
}
// Helloworld

举个贴近生产的例子：

每个组件需要国际化语言处理

const languageText = {
    'en_US':user:{
        userName:"User Name"
    },
    'zh_CN':user:{
        userName:"用户名"
    }
}
const injectLanguage = (nameSpace) =>{
    return targetComponent =>{
        targetComponent.prototype.getLanguage = function(){
            return "en_US"
        }
        targetComponent.prototype.getText = function(){
            const currentLanguage = this.getLanguage();
            return languageText[currentLanguage]
        }
        return targetComponent;
    }
}

@languageText("user")
class User extends React.Component{
    render(){
        return <div>{this.props.getText().userName}:<input/></div>
    }
}

三、Mixin的缺点

墙倒众人推，破鼓万人捶。

社区开始不待见这个方式，导致成了“反模式”
Daniel Avramov 发现并提出问题：

• 破坏原组件的封装

mixin给组件注入新功能的时候，也可能导致加入一些隐藏的状态，维护组件的人难免会踩坑；

• 命名冲突

引用多个mixin的时候难免会有作者取名雷同，这时候就要花时间去解决这种冲突。

• 增加复杂性

引入多个mixin的时候尽管你能规避命名和隐藏的功能，但是几个月后或者其他人来看却是难以理解。一个组件内居然实现了这么多功能。

四、替代品

mixin被打入冷宫称为"反模式"，必定会有"正模式"来替代它，没错，他就是官方推荐的高阶组件。
我们下期再见！