React与ES6系列：
在使用React.createClass()的时候你也许使用过一个所谓的mixin的东西。使用它，你可以给React组件天剑很多其他的功能。这个概念不止用在React上，也用在很多其他的编程语言或者框架上。
在ES6中不能够在使用React的mixin机制。本文不会纠结于原因为何。我们只关注ES6中的替代方法。
High-Order Component
或者可以叫做高阶组件。
我们使用前文中使用的CartItem组件作为例子，在其中显示一个每秒计数增加1的timer。
为了更好的演示，我们不修改CartItem的代码。相反的我们要提供一些组件，这些组件会封装CartItem并且给CartItem增强一些另外的方法。这样的一个组件就叫做High-Order Comoentn。
上面的介绍可能还是有些模糊，不要紧随着本文步步深入一切都会变得清晰。
我们假设这个Hight-Order Component叫做IntervalEnhance，存放在一个叫做intervalEnhance.jsx的文件中。那么我们的CartItem应该怎么改呢？
import React from 'react';// 1import { IntervalEnhance} from './IntervalEnhance';class CartItem extends React.Component { //...略...}//2export default IntervalEnhance(CartItem); 解释：
- 引入高阶组件
IntervalEnhance。 - export高阶组件包装增强后的
CartItem。
下满就看看告诫组件是怎么定义的：
//@flowimport React from 'react';//1export var IntervalEnhance = ComposeComponent => class extends ComposeComponent { // 2 static displayName = 'ComponentEnhancedWithIntervalHOC'; constructor(props) { super(props); this.state = { seconds: 0 }; } // 3 componentDidMount() { this.interval = setInterval(this.tick.bind(this), 1000); } // 3 componentWillUnmount() { clearInterval(this.interval); } tick() { this.setState({ seconds: this.state.seconds + 1000 }); } render() { return ( // 4 解释：
-
ComposeComponent => class extends React.Comonent这句。还记得箭头函数吗？没错，这就是一个箭头函数。这个函数接受一个组件为输入参数，返回一个类。ComposedComponent就是输入参数，也就是需要包装增强的组件。export var IntervalEnhance就是把前面定义的函数命名为IntervalEnhanceexport出去给其他的模块使用。 - displayName设定为
ComponentEnhancedWithIntervalHOC是为了在DevTools中方便调试。在DevTools里这个组件就会被叫做ComponentEnhancedWithIntervalHOC。 - 组件生命周期不同阶段的回调。是React组件的内置方法。
- 最有意思的就是这里了。这样的写法会把当前高阶组件的全部props和state都发送给
CartItem，这样CartItem就可以取到this.state.seconds属性的值了。
最后我们就需要修改CartItem组件的内部了。这样才能输出this.state.seconds的值。
import React from 'react';import { IntervalEnhance} from './IntervalEnhance';class CartItem extends React.Component { render() { return ( Time elapsed for interval: {this.props.seconds} ms
); }} 
注意：全部都完成都不需要修改CartItem组件本身（除了render方法）！这就是为什么High-Order Component为什么这里厉害的原因所在。
使用ES7装饰器
使用ES7的装饰器（decorator）代码会更加简洁。
首先，安装babel-plugin-transform-decorators-legacy:
npm install --save-dev babel-plugin-transform-decorators-legacy
之后，配置.babelrc文件：
{ "presets": ["es2015", "react", "stage-0"], "plugins": [ ["transform-decorators-legacy"] ]} 然后：
import React from 'react';import { IntervalEnhance} from './intervalEnhance';@IntervalEnhanceclass CartItem extends React.Component { // ...略...} 总结
Hight-Order Component（高阶组件）非常好用，也可以非常有效的解决问题。当前，使用高阶组件非常多的用来代替旧的mixin。
有一个典型的例子就是。Relay也是facebook发布的一个完全基于React的framework。你的每一个组件都可以包裹在Relay容器中，自动的存取依赖的数据。