React与ES6系列：
- React与ES6（一）开篇介绍
- React和ES6（二）ES6的类和ES7的property initializer
- React与ES6（三）ES6类和方法绑定
- React与ES6（四）ES6如何处理React mixins
在使用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';
// 1
import {IntervalEnhance} from './IntervalEnhance';
class CartItem extends React.Component {
//...略...
}
//2
export default IntervalEnhance(CartItem);
解释：
- 引入高阶组件
IntervalEnhance。 - export高阶组件包装增强后的
CartItem。
下满就看看告诫组件是怎么定义的：
//@flow
import React from 'react';
//1
export 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 {...this.props} {...this.state} />
);
}
}
解释：
-
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 (
<article className="row large-4">
<p className="large-12 column" >
<strong>Time elapsed for interval: </strong>
{this.props.seconds} ms
</p>
</article>
);
}
}
export default IntervalEnhance(CartItem);
注意：全部都完成都不需要修改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';
@IntervalEnhance
class CartItem extends React.Component {
// ...略...
}
总结
Hight-Order Component（高阶组件）非常好用，也可以非常有效的解决问题。当前，使用高阶组件非常多的用来代替旧的mixin。
有一个典型的例子就是Relay。Relay也是facebook发布的一个完全基于React的framework。你的每一个组件都可以包裹在Relay容器中，自动的存取依赖的数据。
