组件是React复用代码的最佳方式，但有时一些不同的组件间也需要共用一些功能，被称为 跨切面关注点，React使用 mixins 来解决这类问题。
一个通用的场景是：一个组件需要定期更新，React提供生命周期方法来告知组件创建或销毁的时间。
eg：mixins实现使用 setInterval() 并保证在组件销毁时清理定时器
var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.forEach(clearInterval);
}
};
var SetInterval = React.createClass({
mixins: [SetIntervalMixin], // 引用mixin
getInitialState: function() {
return {seconds: 0};
},
componentDidMount: function() {
this.setInterval(this.update, 1000); // 调用mixin的setInterval方法
},
update: function() {
this.setState({seconds: this.state.seconds + 1});
},
render: function() {
return (
<p>React has been running for {this.state.seconds} seconds！</p>
);
}
});
ReactDOM.render(
<SetInterval />,
document.getElementById('timeBox')
);
mixins的优点：
如果一个组件使用了多个mixin，并有多个mixin 定义了同样的生命周期方法（如在组件销毁时做资源清理操作等），所有这些生命周期方法都保证会被执行到，执行顺序是：首先按mixin引入顺序执行mixin里的方法，最后执行组件内定义的方法。