If you are upgrading React, you may find situations where you want to switch from Javascript objects to ES6 classes.<\/p>\n
For instance, say you have these objects:<\/p>\n
\nvar MyMixin = {\n componentShouldUpdate: function() {\n \/\/ some logic\n }\n}\n\nReact.createClass({\n mixins: [MyMixin]\n getInitialState: function() {\n \/\/ do some stuff...\n },\n render: function() { \n return (<\/div>)\n }\n})\n<\/pre>\nIdeally you would convert everything to classes, and use inheritance to get the mixin in:<\/p>\n
\nclass MyMixin {\n function componentShouldUpdate() {\n \/\/ some logic\n }\n}\n\nclass MyComponent {\n constructor() {\n \/\/ do some stuff...\n this.state = {}\n }\n\n render() { \n return (<\/div>)\n }\n})\n<\/pre>\nIf you can’t do this (e.g. the mixin is in a library, or it’s too much code to change at once), you can also monkey-patch the mixin’s methods into a base class for the component:<\/p>\n
\nvar MyMixin = {\n componentShouldUpdate: function() {\n \/\/ some logic\n }\n}\n\nclass MyComponent extends (\n React.createClass({ \n mixins: [MyMixin],\n render: () => {}\n }) {\n constructor() {\n \/\/ do some stuff...\n this.state = {}\n }\n\n render() { \n return (<\/div>)\n }\n})\n<\/pre>\n","protected":false},"excerpt":{"rendered":"If you are upgrading React, you may find situations where you want to switch from Javascript objects to ES6 classes. For instance, say you have these objects: var MyMixin = { componentShouldUpdate: function() { \/\/ some logic } } React.createClass({ mixins: [MyMixin] getInitialState: function() { \/\/ do some stuff… }, render: function() { return () … <\/p>\n