前面说过,react使用组合而不是继承来处理父子组件。
一mixin是什么
不过,react对mixin做了一些特殊处理。
在mixin中写的生命周期相关的回调都会被合并,也就是他们都会执行,而不会互相覆盖掉。
比如 你在mixin中可以定义componentDidMount 来初始化组件,他不会覆盖掉使用这个mixin的组件。实际执行的时候,会先执行 mixin 的 componentDidMount ,最后执行组件的componentDidMount 方法。
同样,mixin不应该污染state,所以他也没有 setState 方法。mixin应该只提供接口(即方法),不应该提供任何属性。mixin内部的属性最好是通过闭包的形式作为私有变量存在。就像下面这样:
最好不要放到this上,避免污染。
二 写一个TimerMixin
我们来实现一个TimerMixin,他的提供了一个 timeTick 的方法:
- varTimerMixin=return{
- componentDidMount:this._interval=setInterval(this._onTick,1000);
- },
- format:function(d){
- returnd>=10?d:("0"+d);
- },
- _onTick:vard=newDate();
- this.timerTick(this.format(d.getHours())+":"+this.format(d.getMinutes())+":"+this.format(d.getSeconds()));
- componentWillUnmount: clearInterval(this._interval);
- }
- }
- varCard=React.createClass({
- mixins:[
- TimerMixin()
- ],248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> timerTick:function(t){
- this.setState({
- time:t
- });
- getInitialState: time:'loadingtime'
- render:function(){
- return(
- <div>Hello{this.props.name}!Itis{this.state.time}!</div>
- );
- });