react的版本
目前主要的react有 ES5，ES6.也有ES5和ES6混合编写的。比较混乱。
react官方提倡用ES6。
说到这里，就需要提到一个概念——mixin
mixin在es6中被摒弃掉了。
mixin：
简单来讲，就是部分公用的代码，提取出来作为一个独立的木块，
利用混入的方式来使用。这就是mixin。
es5里面，声明一个mixin单例对象，直接以数组方式插到组件使用即可；
es6不提倡这样的写法，而是使用高阶组件的方式实现。
高阶组件：
其实就是把一个类作为参数丢到另一个类（修饰类）中，
在这个类中将上一个类增加一点东西，然后再return返回去，
等于把上一个类的功能修饰增强了。
哎呀。概念好麻烦。还是看看代码怎么样实现吧。
首先说明一下实现思路。
1.我们用箭头函数，将组件类作为参数丢进去。 2.在这个函数内部，声明一个类，继承传进来的组件类。 3.加入新的属性和方法，然后返回类。
看下实现：
import React,{ Component } from 'react';
import ReactDOM from 'react-dom';
//待增强的类
class MyTest extends Component{
constructor(props){
super(props);
}
render(){
return (<button onClick={this.show.bind(this,this.props)}>click</button>);
}
}
//修饰函数，将类作为参数传入。
let IntervalEnhance = myComponent => {
//声明一个内部类。
// 注意，这个内部类不能有render方法，否则会将原类中的render覆盖。
class ES6_Mixin extends myComponent {
componentWillMount() {
console.log("渲染前");
this.timer = setInterval(function(){
console.log('不断打印中.....');
},500);
}
componentWillUnmount(){
console.log("销毁啦！");
clearInterval(this.timer);
}
show(obj){
console.log(obj);
}
}
//修饰后返回
return ES6_Mixin;
};
var EnhancedTest = IntervalEnhance(MyTest);
ReactDOM.render(<EnhancedTest myname={"zhangwei"} />,document.getElementById('app'));
//10s后销毁
setTimeout(function(){
ReactDOM.unmountComponentAtNode(document.getElementById("app"));
},10000);
说明：
1.MyTest这个类，被增强了计时器功能和show()方法。最后，我们用增强后的类作为新组件类，渲染到页面上。
2.es5版的mixin对象里如果有相同的周期函数，是可以先加载mixin的，然后再加载组件本身的，之间并不会有覆盖
3.高阶组件的做法弱化了之前mixin的功能。
4.新式写法增强了代码的规范性