Created
February 17, 2015 19:42
-
-
Save mattmccray/e41e2bf18b13a153ce67 to your computer and use it in GitHub Desktop.
ES6 Classes w/Mixins -- Idea -- React 0.13
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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> | |
) | |
} | |
} |
Interesting. I'd be curious to see what you come up with.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.