ES6 Classes w/Mixins -- Idea -- React 0.13

component-with-mixins.js

export function ComponentWithMixins( ...mixins) {

    class MixedComponent extends React.Component { }
    
    for( let mixin of mixins) {
        // TODO: Would need to handle mixin collisions...   
        for( let name of Object.keys( mixin)) {
            MixedComponent.prototype[ name]= mixin[ name]
        }
    }
    
    return MixedComponent
}

my-view.js

// Can a form of simple mixins be supported via ES6 classes?
import {ComponentWithMixins} from './component-with-mixins'
let {PureRenderMixin, LinkedStateMixin}= React.addons

class MyView extends ComponentWithMixins( PureRenderMixin, LinkedStateMixin) {
    
    render() {
        return (
            <div>
                Hello
                <input valueLink={ this.linkState( 'name')}/>
            </div>
        )
    }
}

The tricky part would be for mixins that hook into lifecycle events. We could keep a list of mixin lifecycle hooks, then add the appropriate methods to the prototype that would execute each one... ?

💧
🌱

Thoughts?

We can implement the mixins by exposing the life cycle events i.e. ReactClassInterface
And within the ComponentWithMixin we can use the mixSpecIntoComponent of React
for( let mixin of mixins) {
for( let name of Object.keys( mixin)) {
mixSpecIntoComponent (Constructor, mixin);
}
}

I have wrote this code just to check weather i can achieve this or not, and it worked.
BUT still i think mutating existing component by adding extra behavior is not the one we should go for.
We should go for composition and also more functional behavior, since that is also one for the reason why i have chose react over Angular.
So think the Component as a context, and the life cycles as behaviors which carries the component along each way.
And the mixins declare the life cycle events asking for context as an argument, so we can avoid "this" from the mixins as well.

I will try to write prototype of above idea in coming days. Since then i can decouple the data/context from the life cycle events.

Interesting. I'd be curious to see what you come up with.