ReactJS读书笔记四:mixins

前端之家收集整理的这篇文章主要介绍了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. });



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

猜你在找的React相关文章