reactjs通过嵌套组合组件来实现功能模块的。
每个组件都需要一个个定义和使用。
开发中有些代码块肯定会需要多次引用的。
React.createClass({
getname:obj.name
});
这样写看着真不舒服。
所以对于组件中多次使用的呢,reactjs有个mixins属性来实现。
它的参数是一个数组。值为对象,或返回对象的函数或函数实例化的表达式
mixins:[obj] || [fn(Xx)] || [new fn()]
对象上的方法在组件内可以用this.XX来引用,
可以解理成方法和在本组件内定义是一样的。
对象方法内可以使用this来引用组件本身。
而且对象上还可以绑定生命周期属性方法:componentDidMount,
运行时会先执行mixins上的周期方法然后才是组件上的方法。
我的理解是:
mixins之所以存在是想在组件内调用公共的方法,减少开发时间。
如在Did中想用mixins上方法,那么mixins方法肯定需要先执行才能被调用。
所以是mixins上周期方法先执行。
不可定义render getInitialState 这类方法。他们只能在组件中使用。
以下是我测试的代码:
var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.map(clearInterval);
}
};
var TickTock = React.createClass({
mixins: [SetIntervalMixin], // 引用 mixin
getInitialState: function() {
return {seconds: 0};
},
componentDidMount: function() {
this.setInterval(this.tick, 1000); // 调用 mixin 的方法
},
tick: function() {
this.setState({seconds: this.state.seconds + 1});
},
render: function() {
return (
<p>
React has been running for {this.state.seconds} seconds.
</p>
);
}
});
React.render(
<TickTock />,
document.getElementById('example')
);
setTimeout(function(){
React.render(
<TickTock />,
document.getElementById('example2')
);
},1000);
function Mi1(){
return {
componentDidMount:function(){
this.inter=[];
},setInterval: function() {
this.inter.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.inter.map(clearInterval);
}
}
}
var Box1=React.createClass({
mixins:[Mi1()],
getInitialState:function(){
return {num:0};
},
componentDidMount:function(){
this.setInterval(this.click,500)
},
click:function(){
this.setState({num:this.state.num+1})
},
render:function(){
return (
<div>{this.state.num}</div>
)
}
});
React.render(<Box1 />,document.querySelector('#example3'))
var Mi2=function(a){
return {
geta:a
}
}
var Mi3=function(){
this.geta=3;
}
var Box2=React.createClass({
mixins:[new Mi3(3)],
render:function(){
return (
<div>{this.geta}</div>
)
}
});
React.render(<Box2 />,document.querySelector('#example4'));
React.render(<Box2 />,document.querySelector('#example5'));