What is the difference between Higher Order Component (HOC) and Inheritance in React native component
up vote
2
down vote
favorite
I am new to react native from .net background,
Here the Question is how HOC is different from inheritance in OOPS concept by having a parent class with base properties and child that extends the Base and use the state, properties and base methods from the Base class.
Which is the best way to achieve the Parent-> Child -> GrandChild hierarchical relationship in React Components .?
For Example:
Parent.js Looks like
class Parent extends Component
constructor(props)
super(props);
this.state =
value: "Parent",
BaseText: "Inheritance Example"
onUpdate = () =>
console.log("Update called at Parent")
Child.js which extends Parent.js
class Child extends Parent
constructor(props)
super(props);
//this state should inherit the properties of Parent and override only the value property
this.state =
value: "Child",
onUpdate = () =>
super.onUpdate();
console.log("Update called at Child view")
render()
return(
<View>
<Text> Child View</Text>
</View>
)
The GrandChild.js extends from Child.js
class GrandChild extends Child
constructor(props)
super(props);
//this state should inherit the properties of Child, Parent and properties specific to this
this.state =
value: "GrandChild",
Name: "Test Grand Child"
onUpdate = () =>
super.onUpdate();
console.log("Update called at Grand Child view")
render()
return(
<View>
<Text> Grand Child View</Text>
</View>
)
Is this the right way of implementing abstraction in react native
say Parent class will have the common state properties and the child inherits the Parent state and has its own properties.
How to inherit state and how to update values to state in this case .?
reactjs react-native ecmascript-6 es6-class
asked Nov 9 at 7:04
Gowthaman
218314
add a comment |
up vote
2
down vote
favorite
I am new to react native from .net background,
Here the Question is how HOC is different from inheritance in OOPS concept by having a parent class with base properties and child that extends the Base and use the state, properties and base methods from the Base class.
Which is the best way to achieve the Parent-> Child -> GrandChild hierarchical relationship in React Components .?
For Example:
Parent.js Looks like
class Parent extends Component
constructor(props)
super(props);
this.state =
value: "Parent",
BaseText: "Inheritance Example"
onUpdate = () =>
console.log("Update called at Parent")
Child.js which extends Parent.js
class Child extends Parent
constructor(props)
super(props);
//this state should inherit the properties of Parent and override only the value property
this.state =
value: "Child",
onUpdate = () =>
super.onUpdate();
console.log("Update called at Child view")
render()
return(
<View>
<Text> Child View</Text>
</View>
)
The GrandChild.js extends from Child.js
class GrandChild extends Child
constructor(props)
super(props);
//this state should inherit the properties of Child, Parent and properties specific to this
this.state =
value: "GrandChild",
Name: "Test Grand Child"
onUpdate = () =>
super.onUpdate();
console.log("Update called at Grand Child view")
render()
return(
<View>
<Text> Grand Child View</Text>
</View>
)
Is this the right way of implementing abstraction in react native
say Parent class will have the common state properties and the child inherits the Parent state and has its own properties.
How to inherit state and how to update values to state in this case .?
reactjs react-native ecmascript-6 es6-class
asked Nov 9 at 7:04
Gowthaman
218314
2
HOCs use composition, reactjs.org/docs/composition-vs-inheritance.html . The point of this is similar to OOP's en.wikipedia.org/wiki/Composition_over_inheritance . Which is the best way to achieve the Parent-> Child -> GrandChild hierarchical relationship - there is no 'best way' because this depends on components. If you have specific case in mind, consider reasking the question with specific code example.
– estus
Nov 9 at 7:18
Sure will modify the Question with sample code snippet.
– Gowthaman
Nov 9 at 7:31
Do you have an example that would be more real-world?this.stateinheritance in child components won't work well with component composition but I cannot think of a good reason to ever do that. If the state becomes that complex, there is possibly a need to use state management (Redux?). Components need to be refactored to fit composition better but I cannot suggest how to do that because it's unclear what components really do. Btw,onUpdatedoesn't play well with inheritance because it's instance method and there will be nosuper.onUpdate, it should be prototype method.
– estus
Nov 9 at 9:34
Inheritance in JavaScript is prototypal. HOCs are composed functions.
– evolutionxbox
Nov 9 at 13:09
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I am new to react native from .net background,
Here the Question is how HOC is different from inheritance in OOPS concept by having a parent class with base properties and child that extends the Base and use the state, properties and base methods from the Base class.
Which is the best way to achieve the Parent-> Child -> GrandChild hierarchical relationship in React Components .?
For Example:
Parent.js Looks like
class Parent extends Component
constructor(props)
super(props);
this.state =
value: "Parent",
BaseText: "Inheritance Example"
onUpdate = () =>
console.log("Update called at Parent")
Child.js which extends Parent.js
class Child extends Parent
constructor(props)
super(props);
//this state should inherit the properties of Parent and override only the value property
this.state =
value: "Child",
onUpdate = () =>
super.onUpdate();
console.log("Update called at Child view")
render()
return(
<View>
<Text> Child View</Text>
</View>
)
The GrandChild.js extends from Child.js
class GrandChild extends Child
constructor(props)
super(props);
//this state should inherit the properties of Child, Parent and properties specific to this
this.state =
value: "GrandChild",
Name: "Test Grand Child"
onUpdate = () =>
super.onUpdate();
console.log("Update called at Grand Child view")
render()
return(
<View>
<Text> Grand Child View</Text>
</View>
)
Is this the right way of implementing abstraction in react native
say Parent class will have the common state properties and the child inherits the Parent state and has its own properties.
How to inherit state and how to update values to state in this case .?
reactjs react-native ecmascript-6 es6-class
asked Nov 9 at 7:04
Gowthaman
218314
I am new to react native from .net background,
Here the Question is how HOC is different from inheritance in OOPS concept by having a parent class with base properties and child that extends the Base and use the state, properties and base methods from the Base class.
Which is the best way to achieve the Parent-> Child -> GrandChild hierarchical relationship in React Components .?
For Example:
Parent.js Looks like
class Parent extends Component
constructor(props)
super(props);
this.state =
value: "Parent",
BaseText: "Inheritance Example"
onUpdate = () =>
console.log("Update called at Parent")
Child.js which extends Parent.js
class Child extends Parent
constructor(props)
super(props);
//this state should inherit the properties of Parent and override only the value property
this.state =
value: "Child",
onUpdate = () =>
super.onUpdate();
console.log("Update called at Child view")
render()
return(
<View>
<Text> Child View</Text>
</View>
)
The GrandChild.js extends from Child.js
class GrandChild extends Child
constructor(props)
super(props);
//this state should inherit the properties of Child, Parent and properties specific to this
this.state =
value: "GrandChild",
Name: "Test Grand Child"
onUpdate = () =>
super.onUpdate();
console.log("Update called at Grand Child view")
render()
return(
<View>
<Text> Grand Child View</Text>
</View>
)
Is this the right way of implementing abstraction in react native
say Parent class will have the common state properties and the child inherits the Parent state and has its own properties.
How to inherit state and how to update values to state in this case .?
class Parent extends Component
constructor(props)
super(props);
this.state =
value: "Parent",
BaseText: "Inheritance Example"
onUpdate = () =>
console.log("Update called at Parent")
class Parent extends Component
constructor(props)
super(props);
this.state =
value: "Parent",
BaseText: "Inheritance Example"
onUpdate = () =>
console.log("Update called at Parent")
class Child extends Parent
constructor(props)
super(props);
//this state should inherit the properties of Parent and override only the value property
this.state =
value: "Child",
onUpdate = () =>
super.onUpdate();
console.log("Update called at Child view")
render()
return(
<View>
<Text> Child View</Text>
</View>
)
class Child extends Parent
constructor(props)
super(props);
//this state should inherit the properties of Parent and override only the value property
this.state =
value: "Child",
onUpdate = () =>
super.onUpdate();
console.log("Update called at Child view")
render()
return(
<View>
<Text> Child View</Text>
</View>
)
class GrandChild extends Child
constructor(props)
super(props);
//this state should inherit the properties of Child, Parent and properties specific to this
this.state =
value: "GrandChild",
Name: "Test Grand Child"
onUpdate = () =>
super.onUpdate();
console.log("Update called at Grand Child view")
render()
return(
<View>
<Text> Grand Child View</Text>
</View>
)
class GrandChild extends Child
constructor(props)
super(props);
//this state should inherit the properties of Child, Parent and properties specific to this
this.state =
value: "GrandChild",
Name: "Test Grand Child"
onUpdate = () =>
super.onUpdate();
console.log("Update called at Grand Child view")
render()
return(
<View>
<Text> Grand Child View</Text>
</View>
)
reactjs react-native ecmascript-6 es6-class
reactjs react-native ecmascript-6 es6-class
asked Nov 9 at 7:04
Gowthaman
218314
asked Nov 9 at 7:04
Gowthaman
218314
edited Nov 9 at 8:21
asked Nov 9 at 7:04
Gowthaman
218314
asked Nov 9 at 7:04
Gowthaman
218314
asked Nov 9 at 7:04
Gowthaman
218314
218314
2
HOCs use composition, reactjs.org/docs/composition-vs-inheritance.html . The point of this is similar to OOP's en.wikipedia.org/wiki/Composition_over_inheritance . Which is the best way to achieve the Parent-> Child -> GrandChild hierarchical relationship - there is no 'best way' because this depends on components. If you have specific case in mind, consider reasking the question with specific code example.
– estus
Nov 9 at 7:18
Sure will modify the Question with sample code snippet.
– Gowthaman
Nov 9 at 7:31
Do you have an example that would be more real-world?this.stateinheritance in child components won't work well with component composition but I cannot think of a good reason to ever do that. If the state becomes that complex, there is possibly a need to use state management (Redux?). Components need to be refactored to fit composition better but I cannot suggest how to do that because it's unclear what components really do. Btw,onUpdatedoesn't play well with inheritance because it's instance method and there will be nosuper.onUpdate, it should be prototype method.
– estus
Nov 9 at 9:34
Inheritance in JavaScript is prototypal. HOCs are composed functions.
– evolutionxbox
Nov 9 at 13:09
add a comment |
2
HOCs use composition, reactjs.org/docs/composition-vs-inheritance.html . The point of this is similar to OOP's en.wikipedia.org/wiki/Composition_over_inheritance . Which is the best way to achieve the Parent-> Child -> GrandChild hierarchical relationship - there is no 'best way' because this depends on components. If you have specific case in mind, consider reasking the question with specific code example.
– estus
Nov 9 at 7:18
Sure will modify the Question with sample code snippet.
– Gowthaman
Nov 9 at 7:31
Do you have an example that would be more real-world?this.stateinheritance in child components won't work well with component composition but I cannot think of a good reason to ever do that. If the state becomes that complex, there is possibly a need to use state management (Redux?). Components need to be refactored to fit composition better but I cannot suggest how to do that because it's unclear what components really do. Btw,onUpdatedoesn't play well with inheritance because it's instance method and there will be nosuper.onUpdate, it should be prototype method.
– estus
Nov 9 at 9:34
Inheritance in JavaScript is prototypal. HOCs are composed functions.
– evolutionxbox
Nov 9 at 13:09
2
2
HOCs use composition, reactjs.org/docs/composition-vs-inheritance.html . The point of this is similar to OOP's en.wikipedia.org/wiki/Composition_over_inheritance . Which is the best way to achieve the Parent-> Child -> GrandChild hierarchical relationship - there is no 'best way' because this depends on components. If you have specific case in mind, consider reasking the question with specific code example.
– estus
Nov 9 at 7:18
HOCs use composition, reactjs.org/docs/composition-vs-inheritance.html . The point of this is similar to OOP's en.wikipedia.org/wiki/Composition_over_inheritance . Which is the best way to achieve the Parent-> Child -> GrandChild hierarchical relationship - there is no 'best way' because this depends on components. If you have specific case in mind, consider reasking the question with specific code example.
– estus
Nov 9 at 7:18
Sure will modify the Question with sample code snippet.
– Gowthaman
Nov 9 at 7:31
Sure will modify the Question with sample code snippet.
– Gowthaman
Nov 9 at 7:31
Do you have an example that would be more real-world?
this.state inheritance in child components won't work well with component composition but I cannot think of a good reason to ever do that. If the state becomes that complex, there is possibly a need to use state management (Redux?). Components need to be refactored to fit composition better but I cannot suggest how to do that because it's unclear what components really do. Btw, onUpdate doesn't play well with inheritance because it's instance method and there will be no super.onUpdate, it should be prototype method.– estus
Nov 9 at 9:34
Do you have an example that would be more real-world?
this.state inheritance in child components won't work well with component composition but I cannot think of a good reason to ever do that. If the state becomes that complex, there is possibly a need to use state management (Redux?). Components need to be refactored to fit composition better but I cannot suggest how to do that because it's unclear what components really do. Btw, onUpdate doesn't play well with inheritance because it's instance method and there will be no super.onUpdate, it should be prototype method.– estus
Nov 9 at 9:34
Inheritance in JavaScript is prototypal. HOCs are composed functions.
– evolutionxbox
Nov 9 at 13:09
Inheritance in JavaScript is prototypal. HOCs are composed functions.
– evolutionxbox
Nov 9 at 13:09
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
React promotes composition as an alternative to class inheritance. Components were designed to be efficiently composed. Hooks API augments function components with features that previously required class components to be used.
This doesn't mean that inheritance isn't allowed. The problem with it is that existing patterns such as higher-order component are widely used in React ecosystem and aren't compatible with OOP:
const withBaz = Comp => <Comp baz />
@withBaz
class Bar extends Foo ...
This approach is common but it isn't OOP friendly because in this case Bar is actually not a class anymore but arrow function, it cannot be inherited further.
There are no problems with using OOP for first-party React components as long as a developer controls all components in class hierarchy, but this may be unpractical because there always may be a need to involve third-party code that isn't OOP-friendly. The use of composition where it fits results in more flexible design.
answered Nov 9 at 9:30
estus
64.6k2195203
with composition is it possible to have lifecycle events.? say Parent class has a ComponentDidMount(), rendering Child should call the Componentdidmount of its own and also the lifecycle event of Parent also .?
– Gowthaman
Nov 9 at 10:28
componentDidMount will be called in both components if they were mounted (i.e. successfully rendered).
– estus
Nov 9 at 10:29
One last question. How can i achieve inheritence of state property in Child to use both the Parent and its own state property .?
– Gowthaman
Nov 9 at 12:51
You probably don't need. That's why I asked for real-world example. It could be expressed in a way that is idiomatic to React without inheritance. Usually you need to use inheritance only when you need to extend the functionality of third-party class components you cannot modify directly.
– estus
Nov 9 at 12:56
Say for example, We are building a DataEntry Form(include Input controls, Grids etc..) and the List Form(Includes search control and a Grid) there some common methods like exporting the grid to Excel, Fetching the Records for that grid, state properties such as FormName, GridName. So i want those common methods and state properties to be part of the AbstractForm.js this will act as the parent for both DataentryForm.js(the details about input fields are specific to this child) and ListForm.js(details about the search field is specific to this child).
– Gowthaman
Nov 9 at 13:11
|
show 1 more comment
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
React promotes composition as an alternative to class inheritance. Components were designed to be efficiently composed. Hooks API augments function components with features that previously required class components to be used.
This doesn't mean that inheritance isn't allowed. The problem with it is that existing patterns such as higher-order component are widely used in React ecosystem and aren't compatible with OOP:
const withBaz = Comp => <Comp baz />
@withBaz
class Bar extends Foo ...
This approach is common but it isn't OOP friendly because in this case Bar is actually not a class anymore but arrow function, it cannot be inherited further.
There are no problems with using OOP for first-party React components as long as a developer controls all components in class hierarchy, but this may be unpractical because there always may be a need to involve third-party code that isn't OOP-friendly. The use of composition where it fits results in more flexible design.
answered Nov 9 at 9:30
estus
64.6k2195203
with composition is it possible to have lifecycle events.? say Parent class has a ComponentDidMount(), rendering Child should call the Componentdidmount of its own and also the lifecycle event of Parent also .?
– Gowthaman
Nov 9 at 10:28
componentDidMount will be called in both components if they were mounted (i.e. successfully rendered).
– estus
Nov 9 at 10:29
One last question. How can i achieve inheritence of state property in Child to use both the Parent and its own state property .?
– Gowthaman
Nov 9 at 12:51
You probably don't need. That's why I asked for real-world example. It could be expressed in a way that is idiomatic to React without inheritance. Usually you need to use inheritance only when you need to extend the functionality of third-party class components you cannot modify directly.
– estus
Nov 9 at 12:56
Say for example, We are building a DataEntry Form(include Input controls, Grids etc..) and the List Form(Includes search control and a Grid) there some common methods like exporting the grid to Excel, Fetching the Records for that grid, state properties such as FormName, GridName. So i want those common methods and state properties to be part of the AbstractForm.js this will act as the parent for both DataentryForm.js(the details about input fields are specific to this child) and ListForm.js(details about the search field is specific to this child).
– Gowthaman
Nov 9 at 13:11
|
show 1 more comment
up vote
0
down vote
React promotes composition as an alternative to class inheritance. Components were designed to be efficiently composed. Hooks API augments function components with features that previously required class components to be used.
This doesn't mean that inheritance isn't allowed. The problem with it is that existing patterns such as higher-order component are widely used in React ecosystem and aren't compatible with OOP:
const withBaz = Comp => <Comp baz />
@withBaz
class Bar extends Foo ...
This approach is common but it isn't OOP friendly because in this case Bar is actually not a class anymore but arrow function, it cannot be inherited further.
There are no problems with using OOP for first-party React components as long as a developer controls all components in class hierarchy, but this may be unpractical because there always may be a need to involve third-party code that isn't OOP-friendly. The use of composition where it fits results in more flexible design.
answered Nov 9 at 9:30
estus
64.6k2195203
with composition is it possible to have lifecycle events.? say Parent class has a ComponentDidMount(), rendering Child should call the Componentdidmount of its own and also the lifecycle event of Parent also .?
– Gowthaman
Nov 9 at 10:28
componentDidMount will be called in both components if they were mounted (i.e. successfully rendered).
– estus
Nov 9 at 10:29
One last question. How can i achieve inheritence of state property in Child to use both the Parent and its own state property .?
– Gowthaman
Nov 9 at 12:51
You probably don't need. That's why I asked for real-world example. It could be expressed in a way that is idiomatic to React without inheritance. Usually you need to use inheritance only when you need to extend the functionality of third-party class components you cannot modify directly.
– estus
Nov 9 at 12:56
Say for example, We are building a DataEntry Form(include Input controls, Grids etc..) and the List Form(Includes search control and a Grid) there some common methods like exporting the grid to Excel, Fetching the Records for that grid, state properties such as FormName, GridName. So i want those common methods and state properties to be part of the AbstractForm.js this will act as the parent for both DataentryForm.js(the details about input fields are specific to this child) and ListForm.js(details about the search field is specific to this child).
– Gowthaman
Nov 9 at 13:11
|
show 1 more comment
up vote
0
down vote
up vote
0
down vote
React promotes composition as an alternative to class inheritance. Components were designed to be efficiently composed. Hooks API augments function components with features that previously required class components to be used.
This doesn't mean that inheritance isn't allowed. The problem with it is that existing patterns such as higher-order component are widely used in React ecosystem and aren't compatible with OOP:
const withBaz = Comp => <Comp baz />
@withBaz
class Bar extends Foo ...
This approach is common but it isn't OOP friendly because in this case Bar is actually not a class anymore but arrow function, it cannot be inherited further.
There are no problems with using OOP for first-party React components as long as a developer controls all components in class hierarchy, but this may be unpractical because there always may be a need to involve third-party code that isn't OOP-friendly. The use of composition where it fits results in more flexible design.
answered Nov 9 at 9:30
estus
64.6k2195203
React promotes composition as an alternative to class inheritance. Components were designed to be efficiently composed. Hooks API augments function components with features that previously required class components to be used.
This doesn't mean that inheritance isn't allowed. The problem with it is that existing patterns such as higher-order component are widely used in React ecosystem and aren't compatible with OOP:
const withBaz = Comp => <Comp baz />
@withBaz
class Bar extends Foo ...
This approach is common but it isn't OOP friendly because in this case Bar is actually not a class anymore but arrow function, it cannot be inherited further.
There are no problems with using OOP for first-party React components as long as a developer controls all components in class hierarchy, but this may be unpractical because there always may be a need to involve third-party code that isn't OOP-friendly. The use of composition where it fits results in more flexible design.
answered Nov 9 at 9:30
estus
64.6k2195203
answered Nov 9 at 9:30
estus
64.6k2195203
answered Nov 9 at 9:30
estus
64.6k2195203
answered Nov 9 at 9:30
estus
64.6k2195203
64.6k2195203
with composition is it possible to have lifecycle events.? say Parent class has a ComponentDidMount(), rendering Child should call the Componentdidmount of its own and also the lifecycle event of Parent also .?
– Gowthaman
Nov 9 at 10:28
componentDidMount will be called in both components if they were mounted (i.e. successfully rendered).
– estus
Nov 9 at 10:29
One last question. How can i achieve inheritence of state property in Child to use both the Parent and its own state property .?
– Gowthaman
Nov 9 at 12:51
You probably don't need. That's why I asked for real-world example. It could be expressed in a way that is idiomatic to React without inheritance. Usually you need to use inheritance only when you need to extend the functionality of third-party class components you cannot modify directly.
– estus
Nov 9 at 12:56
Say for example, We are building a DataEntry Form(include Input controls, Grids etc..) and the List Form(Includes search control and a Grid) there some common methods like exporting the grid to Excel, Fetching the Records for that grid, state properties such as FormName, GridName. So i want those common methods and state properties to be part of the AbstractForm.js this will act as the parent for both DataentryForm.js(the details about input fields are specific to this child) and ListForm.js(details about the search field is specific to this child).
– Gowthaman
Nov 9 at 13:11
|
show 1 more comment
with composition is it possible to have lifecycle events.? say Parent class has a ComponentDidMount(), rendering Child should call the Componentdidmount of its own and also the lifecycle event of Parent also .?
– Gowthaman
Nov 9 at 10:28
componentDidMount will be called in both components if they were mounted (i.e. successfully rendered).
– estus
Nov 9 at 10:29
One last question. How can i achieve inheritence of state property in Child to use both the Parent and its own state property .?
– Gowthaman
Nov 9 at 12:51
You probably don't need. That's why I asked for real-world example. It could be expressed in a way that is idiomatic to React without inheritance. Usually you need to use inheritance only when you need to extend the functionality of third-party class components you cannot modify directly.
– estus
Nov 9 at 12:56
Say for example, We are building a DataEntry Form(include Input controls, Grids etc..) and the List Form(Includes search control and a Grid) there some common methods like exporting the grid to Excel, Fetching the Records for that grid, state properties such as FormName, GridName. So i want those common methods and state properties to be part of the AbstractForm.js this will act as the parent for both DataentryForm.js(the details about input fields are specific to this child) and ListForm.js(details about the search field is specific to this child).
– Gowthaman
Nov 9 at 13:11
with composition is it possible to have lifecycle events.? say Parent class has a ComponentDidMount(), rendering Child should call the Componentdidmount of its own and also the lifecycle event of Parent also .?
– Gowthaman
Nov 9 at 10:28
with composition is it possible to have lifecycle events.? say Parent class has a ComponentDidMount(), rendering Child should call the Componentdidmount of its own and also the lifecycle event of Parent also .?
– Gowthaman
Nov 9 at 10:28
componentDidMount will be called in both components if they were mounted (i.e. successfully rendered).
– estus
Nov 9 at 10:29
componentDidMount will be called in both components if they were mounted (i.e. successfully rendered).
– estus
Nov 9 at 10:29
One last question. How can i achieve inheritence of state property in Child to use both the Parent and its own state property .?
– Gowthaman
Nov 9 at 12:51
One last question. How can i achieve inheritence of state property in Child to use both the Parent and its own state property .?
– Gowthaman
Nov 9 at 12:51
You probably don't need. That's why I asked for real-world example. It could be expressed in a way that is idiomatic to React without inheritance. Usually you need to use inheritance only when you need to extend the functionality of third-party class components you cannot modify directly.
– estus
Nov 9 at 12:56
You probably don't need. That's why I asked for real-world example. It could be expressed in a way that is idiomatic to React without inheritance. Usually you need to use inheritance only when you need to extend the functionality of third-party class components you cannot modify directly.
– estus
Nov 9 at 12:56
Say for example, We are building a DataEntry Form(include Input controls, Grids etc..) and the List Form(Includes search control and a Grid) there some common methods like exporting the grid to Excel, Fetching the Records for that grid, state properties such as FormName, GridName. So i want those common methods and state properties to be part of the AbstractForm.js this will act as the parent for both DataentryForm.js(the details about input fields are specific to this child) and ListForm.js(details about the search field is specific to this child).
– Gowthaman
Nov 9 at 13:11
Say for example, We are building a DataEntry Form(include Input controls, Grids etc..) and the List Form(Includes search control and a Grid) there some common methods like exporting the grid to Excel, Fetching the Records for that grid, state properties such as FormName, GridName. So i want those common methods and state properties to be part of the AbstractForm.js this will act as the parent for both DataentryForm.js(the details about input fields are specific to this child) and ListForm.js(details about the search field is specific to this child).
– Gowthaman
Nov 9 at 13:11
|
show 1 more comment
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53221196%2fwhat-is-the-difference-between-higher-order-component-hoc-and-inheritance-in-r%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
HOCs use composition, reactjs.org/docs/composition-vs-inheritance.html . The point of this is similar to OOP's en.wikipedia.org/wiki/Composition_over_inheritance . Which is the best way to achieve the Parent-> Child -> GrandChild hierarchical relationship - there is no 'best way' because this depends on components. If you have specific case in mind, consider reasking the question with specific code example.
– estus
Nov 9 at 7:18
Sure will modify the Question with sample code snippet.
– Gowthaman
Nov 9 at 7:31
Do you have an example that would be more real-world?
this.stateinheritance in child components won't work well with component composition but I cannot think of a good reason to ever do that. If the state becomes that complex, there is possibly a need to use state management (Redux?). Components need to be refactored to fit composition better but I cannot suggest how to do that because it's unclear what components really do. Btw,onUpdatedoesn't play well with inheritance because it's instance method and there will be nosuper.onUpdate, it should be prototype method.– estus
Nov 9 at 9:34
Inheritance in JavaScript is prototypal. HOCs are composed functions.
– evolutionxbox
Nov 9 at 13:09