React: What determines that Act of Inaction is actually React?
It is easy to follow in ES6 syntax that the component that extends the component from React is a React component. For example:
import { Component } from 'react';
class ExampleComponent extends Component {
render(){
return(
//render component content here
)
}
}
but if you rewrite this using the Stateless Component approach:
const ExampleComponent = (props) => {
return
//render component content here
}
... what's going on behind the scenes so that this component inherits lifecycle behavior from Component?
A stateless component as a function acts like the body of a render method found in lifecycle methods. When you define a component as a function, it is wrapped in the class's render method.
Component class render () === Stateless function
What's going on behind the scenes so that this component inherits lifecycle behavior from Component?
A stateless component does not have a maintainer instance and as such has no lifecycle methods .
It's just a function that returns a React element (strings and null
are valid React elements).
React treats components and stateless components differently. If it's a function that returns something rendered, then it gets rendered directly. If it is a class with a render method, then an instance of the class (if not already executed) and the method is used render
.