mixins.md

id	title	layout	prev	next
docs-mixins	Mixins	docs	advanced-components.html	api.html

Mixins allow code to be shared between multiple React components. They are pretty similar to mixins in Python or traits in PHP. Let's look at a simple example:

var MyMixin = {
  getMessage: function() {
    return 'hello world';
  }
};

var MyComponent = React.createClass({
  mixins: [MyMixin],
  render: function() {
    return <div>{this.getMessage()}</div>;
  }
});

A class can use multiple mixins, but no two mixins can define the same method. Two mixins can, however, implement the same lifecycle method. In this case, each implementation will be invoked one after another.

The only exception is the shouldComponentUpdate lifecycle method. This method may only be implemented once (either by a mixin or by the component).

var Mixin1 = {
  componentDidMount: function() {
    console.log('Mixin1.componentDidMount()');
  }
};

var Mixin2 = {
  componentDidMount: function() {
    console.log('Mixin2.componentDidMount()');
  }
};


var MyComponent = React.createClass({
  mixins: [Mixin1, Mixin2],
  render: function() {
    return <div>hello world</div>;
  }
});

When MyComponent is mounted into the page, the following text will print to the console:

Mixin1.componentDidMount()
Mixin2.componentDidMount()

When should you use mixins?

In general, add a mixin whenever you want a component to share some utility methods, public interface, or lifecycle behavior. Often it's appropriate to use them as you would use a superclass in another OOP language.