React:mixin

由 TG 创建, 最后一次修改 2017-06-19
      在开发中,我们或多或少都会有一些通用的功能,如果我们重复的编写相同的代码去执行,这样虽然是可行的,但会造成脚本的臃肿。在React中,提供了一个mixin方法,它允许我们定义在多个组件中共用的方法,也可以这样理解,把一个 mixin 对象上的方法都导入到多个组件中。

1、使用方法

一个简单的mixin
假设在多个组件中,我们都需要一个默认的name属性:

var DefaultNameMixin = {

  getDefaultProps: function(){

    return {

      name: 'tg'

    };

  }

};

上面的代码中,我们定义了一个默认的name属性。


加入到React组件中

要使用mixin,我们只需要组件中加入mixins属性,然后把mixin包裹成一个数组,将它作为该属性的值即可:

var MyTitle = React.createClass({

  mixins: [DefaultNameMixin],

  render: function(){

    return (

      <p>{this.props.name}</p>

    );

  }

});


var MyContent = React.createClass({

  mixins: [DefaultNameMixin],

  render: function(){

    return (

      <p>{this.props.name}</p>

    );

  }

});


ReactDOM.render(

  <div>

    <MyTitle/>

    <MyContent/>

  </div>,

  document.body

);


//渲染结果

<div>

  <p>tg</p>

  <p>tg</p>

</div>

上面的代码中,我们将同一个mixin加入了两个组件,它们都可以获取到name属性。


2、防止静默函数覆盖

防止静默函数覆盖,也可以这样理解,当mixin中包含生命周期方法时,mixin中的生命周期方法和组件类中的生命周期方法并不会互相覆盖,而是两者合并,都会被执行。

var DefaultNameMixin = {   

  getDefaultProps: function(){   

    console.log(1);

    return {a:1}

  }  

};


var MyTitle = React.createClass({

  mixins: [DefaultNameMixin],

  getDefaultProps: function(){

    console.log(2);

    return {b:1}

  },

  render: function(){

    return (

      <p>{console.log(this.props)}</p>

    );

  }

});


ReactDOM.render(

  <div>

    <MyTitle/>

  </div>,

  document.body

);


//打印结果

1

2

Object {a: 1, b: 1}

从上面代码的运行结果来看,我们可以知道mixin方法里的getDefaultProps方法和组件类中的getDefaultProps方法都执行了,而且执行顺序是:mixin里的先执行,组件类里的后执行。最终的初始props是{a:1,b:1}。


注意事项

(1)因为mixin的作用是抽离通用功能,不需要渲染DOM,所以它没有render方法。如果你定义了render方法,React会报错:

ReactClassInterface: You are attempting to define `render` on your component more than once. This conflict may be due to a mixin.

(2)不能设置相同的props或state

如果设置相同的props或state,会报错:

mergeIntoWithNoDuplicateKeys(): Tried to merge two objects with the same key: `name`. 

(3)不能设置同名方法

如果设置同名方法,会报错:

ReactClassInterface: You are attempting to define `name` on your component more than once. This conflict may be due to a mixin.


3、多个mixin混合

上面我们提到传递给mixins属性的值应该是一个数组,所以我们可以在组件中包含多个mixins:

var DefaultNameMixin = {   

  getDefaultProps: function(){   

    console.log(1);

    return {a:1}

  }  

};


var DefaultTitleMixin = {   

  getDefaultProps: function(){   

    console.log(2)   

    return {h:1};   

  }   

};


var MyTitle = React.createClass({

  mixins: [DefaultNameMixin,DefaultTitleMixin],

  getDefaultProps: function(){

    console.log(3);

    return {b:1}

  },

  render: function(){

    return (

      <p>{console.log(this.props)}</p>

    );

  }

});


ReactDOM.render(

  <div>

    <MyTitle/>

  </div>,

  document.body

);


//打印结果

1

2

3

Object {a: 1, h: 1, b: 1}

在上面的代码中,我们定义了两个mixin,然后以数组的形式传递给组件类的mixins属性,最终返回的默认props是{a:1,h:1,b:1}。


由此得知,一个组件不仅能包含多个mixin,而且如果一个组件使用了多个mixin,并且有多个mixin定义了相同的生命周期方法,所有这些生命周期方法都会被执行。

方法执行顺序

mixin内的方法按引入顺序执行,也就是从左到右,最后才执行组件类内定义的方法。


以上内容是否对您有帮助:

二维码
建议反馈
二维码