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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/336.html