Clever Geek Handbook

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?

+3


source to share


2 answers


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

+3


source


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

.

+3


source






More articles:


All Articles