I am reading this and it says:
When a component is purely a result of props alone, no state, the component can be written as a pure function avoiding the need to create a React component instance.
What's the difference between a component and a component instance ?
Are they the same ?
EDIT:
What is the difference between Component
and Component Instance
?
How do they relate to each-other ?
Conceptually ?
How are they represented in computer memory? How does the representation differ ?
What is a component and what is an instance of that component ? (In memory.) What kind of JS Object ?
Instance in what sense ? Object oriented sense ?
Is it true that every component can have (one or more) instance(s) ?
How many instances can a component have ?
Does it even make sense to say that an instance can be created for a/every react component ?
How are react component instances created and how are components created ?
Reason for asking:
I am trying to create a concept map of react to clarify the terminology and how they relate to each other.
Here is a draft:
The basic difference is, when it a Component
, React will run/add all its Lifecycle methods. This will be useful when you have state
in your component. When you use this component, React will create a React Component Instance
which will have all the lifecycle methods and other hooks added to it.
class App extends React.Component{
...
}
In some cases, you won't use state
. In those cases, adding all those lifecycle methods are unnecessary. So, React gives you an way to create an component which will have render
alone. It is called PureComponent
. When you use this, there is no need to create a new Component Instance
because there is no lifecycle methods here. It'll just be a function which can take props
and return React Elements.
class App extends React.PureComponent{
...
}
Hope this helps!
[Update]
What is a Component
and a Component Instance
?
Technically, a Component
in React is a class
or a function
.
Example:
class App extends React.Component{
...
}
//stateless component
const App = (props) => {
...
}
When you use that component
, it'll be instantiated, more like new App()
. But, React does it by itself in a different way.
For Example:
render(){
return <App/> //Instance of the component App
}
Instances are required because, each instance can perform individually. Instances are a copy of original class.
Simple answer is, components
will be a Class
and component Instance
will be the copy/instance of the class and will be used in render
Hope this explains!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With