浅谈React mixins

组件是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], // 引用mixingetInitialState: 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里的方法，最后执行组件内定义的方法。