Mixins will allow you to apply behaviors to multiple React components.

 

Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called cross-cutting concerns. React provides mixins to solve this problem.

https://facebook.github.io/react/docs/reusable-components.html

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Lesson 12: Mixins</title>
    <script src="http://fb.me/react-0.8.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
    <style>
        body {
            margin: 25px;
        }
    </style>
</head>
<body>
<div id="panel"></div>
<script type="text/jsx">
    /** @jsx React.DOM */

    var ReactMixin = {
        componentWillMount: function(){
            console.log("will mount")
        },
        getInitialState:function(){
            return {count:0}
        },
        incrementCount:function(){
            this.setState({count:this.state.count+1})
        }
    };

    var APP = React.createClass({

        render: function(){
            return (
                    <div>
                        <ButtonComponent val="This is a button"></ButtonComponent>
                        <InputComponent val="this is a input"></InputComponent>
                    </div>
            );
        }
    });

    var ButtonComponent = React.createClass({
        mixins: [ReactMixin],
        render: function(){
            return (
                    <button onClick={this.incrementCount}>{this.props.val} -- {this.state.count}</button>
            );
        }
    });

    var InputComponent = React.createClass({
        mixins: [ReactMixin],
        //Can double the function in the mixin, React will combine both
        componentWillMount: function(){
            this.inc = setInterval(this.incrementCount, 500);
        },
        unmount: function() {
            this.componentWillUnmount();
        },
        render: function() {
            return (
                    <div>
                    <input type="text" value={this.props.val +' -- '+ this.state.count}/>
                    <button onClick={this.unmount}>unmount</button>
                    </div>
            );
        },
        componentWillUnmount: function() {
            clearInterval(this.inc);
        }
    });

    React.renderComponent(
            <APP />,
            document.getElementById('panel'))

</script>
</body>
</html>