Sunday, May 12, 2024
 Popular · Latest · Hot · Upcoming
12
rated 0 times [  16] [ 4]  / answers: 1 / hits: 55503  / 10 Years ago, mon, september 8, 2014, 12:00:00

One of the things I appreciate the most about Backbone.js is how simple and elegant inheritance works. I'm starting to get to grips with React, and can't really find anything in react that resembles this Backbone code



var Vehicle = Backbone.View.extend({
methodA: function() { // ... }
methodB: function() { // ... }
methodC: function() { // ... }
});

var Airplane = Vehicle.extend({
methodC: function() {
// Overwrite methodC from super
}
});


In react we have mixins, and using those we could get somewhat close to the above example if we went like this



var vehicleMethods = {
methodA: function() { // ... }
methodB: function() { // ... }
}

var Vehicle = React.createClass({
mixins: [vehicleMethods]
methodC: function() {
// Define method C for vehicle
}
});

var Airplane = React.createClass({
mixins: [vehicleMethods]
methodC: function() {
// Define method C again for airplane
}
});


This is less repetitive than defining the same stuff over and over again, but it doesn't seem to be nearly as flexible as the Backbone way. For instance, I get an error if I try to redefine/overwrite a method that exists in one of my mixins. On top of that, the React.js way is more code for me to write.



There is some incredibly clever stuff in react, and it feels like this is more the case of me not getting how to properly do this, than it feels like a feature missing from React.



Any pointers are greatly appreciated.


More From » inheritance

 Answers
17

To get something that resembles inheritance (actually composition as pointed out in comments), you can make an Airplane in your example wrap itself in a Vehicle. If you want to expose methods on Vehicle in the Airplane component, you can use a ref and connect them one-by-one. This is not exactly inheritance (it's actually composition), particularly because the this.refs.vehicle will not be accessible until after the component has been mounted.



var Vehicle = React.createClass({
...
});

var Airplane = React.createClass({
methodA: function() {
if (this.refs != null) return this.refs.vehicle.methodA();
},
...
render: function() {
return (
<Vehicle ref=vehicle>
<h1>J/K I'm an airplane</h1>
</Vehicle>
);
}
});


Also it's worth mention that in the React official documentation they prefer composition over inheritance:




So What About Inheritance? At Facebook, we use React in thousands of
components, and we haven't found any use cases where we would
recommend creating component inheritance hierarchies.



Props and composition give you all the flexibility you need to
customize a component's look and behavior in an explicit and safe way.
Remember that components may accept arbitrary props, including
primitive values, React elements, or functions.



If you want to reuse non-UI functionality between components, we
suggest extracting it into a separate JavaScript module. The
components may import it and use that function, object, or a class,
without extending it.




Another thing worth mention that using ES2015/ES6+ you can also spread the object props from Airplane component to the Vehicle component



render: function() {
return (
<Vehicle {...this.props}>
<h1>J/K I'm an airplane</h1>
</Vehicle>
);
}

[#69537] Friday, September 5, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
emanir

Total Points: 151
Total Questions: 90
Total Answers: 105

Location: Suriname
Member since Sun, Jun 13, 2021
3 Years ago
;