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. var Timer = function() {  
2.  var t = 1;//私有属性  
3. return {//xxxx}  
4. }  

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

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

二 写一个TimerMixin

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

[javascript]  view plain  copy

 

1. var TimerMixin = function() {  
2. return {  
3. componentDidMount: function() {  
4. this._interval = setInterval(this._onTick, 1000);  
5. },  
6. format: function(d) {  
7. return d >= 10 ? d : ("0"+d);  
8. },  
9. _onTick: function() {  
10. var d = new Date();  
11. this.timerTick(this.format(d.getHours()) + ":" + this.format(d.getMinutes()) + ":" + this.format(d.getSeconds()));  
12. },  
13. componentWillUnmount: function() {  
14. clearInterval(this._interval);  
15. }  
16. }  
17. }  
18. var Card = React.createClass({  
19. mixins: [  
20. TimerMixin()  
21. ],  
22. timerTick: function(t) {  
23. this.setState({  
24. time: t  
25. });  
26. },  
27. getInitialState: function() {  
28. return {  
29. time: 'loading time'  
30. }  
31. },  
32. render: function() {  
33. return (  
34. <div>Hello {this.props.name}! It is {this.state.time} !</div>  
35. );  
36. }  
37. });  

前面说过，TimerMixin 的 componentDidMount 方法会先执行，然后执行 Card 的 componentDidMount 方法，如果你有疑问，可以自己通过断点来验证。