Reactjs 之 mixins

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'));