ReactJS读书笔记四：mixins

前面说过，react使用组合而不是继承来处理父子组件。

那么显然无法通过继承父类来实现公共功能，所以react提供了mixin的机制。

一mixin是什么

mixin，可以非常简单的理解，他就是把 一个 mixin 对象上的方法都混合到了另一个组件上，和 $.extend方法做的事情类似。

不过，react对mixin做了一些特殊处理。

在mixin中写的生命周期相关的回调都会被合并，也就是他们都会执行，而不会互相覆盖掉。

比如 你在mixin中可以定义componentDidMount 来初始化组件，他不会覆盖掉使用这个mixin的组件。实际执行的时候，会先执行 mixin 的 componentDidMount ，最后执行组件的componentDidMount 方法。

需要注意的是，因为mixin的作用是抽离公共功能，不存在渲染dom的需要，所以它没有render方法。如果你定义了render方法，那么他会和组件的render方法冲突而报错。

同样，mixin不应该污染state，所以他也没有 setState 方法。mixin应该只提供接口（即方法），不应该提供任何属性。mixin内部的属性最好是通过闭包的形式作为私有变量存在。就像下面这样：

[javascript] view plain copy

1. varTimer=function(){
2. vart=1;//私有属性
3. return{//xxxx}
4. }

最好不要放到this上，避免污染。

当然，如果你真的在this上写了一些变量，那么react也会进行mixin，因为react并不会区分你的属性到底是不是函数。

二 写一个TimerMixin

我们来实现一个TimerMixin，他的提供了一个 timeTick 的方法：

copy

varTimerMixin=return{
1. componentDidMount:this._interval=setInterval(this._onTick,1000);
2. },
3. format:function(d){
4. returnd>=10?d:("0"+d);
5. },
6. _onTick:vard=newDate();
7. this.timerTick(this.format(d.getHours())+":"+this.format(d.getMinutes())+":"+this.format(d.getSeconds()));
8. componentWillUnmount: clearInterval(this._interval);
9. }
10. }
11. varCard=React.createClass({
12. mixins:[
13. TimerMixin()
14. ],248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> timerTick:function(t){
15. this.setState({
16. time:t
17. });
18. getInitialState: time:'loadingtime'
19. render:function(){
20. return(
21. <div>Hello{this.props.name}!Itis{this.state.time}!</div>
22. );
23. });