What is the difference between Props in Class and functional components in ReactJs?

user_10613088 0
Viewed 247

I came across this Article

https://overreacted.io/how-are-function-components-different-from-classes/

It's very interesting but there is one thing I wanted to ask, I kinda understand it but wanna dig more by exploring some more articles on this topic, particularly, what does it mean that props are tied to "this"? Does the difference come from how the closures work ? It's kinda vague I think I don't quite understand how render method works and how the variables are being stacked while calling a method in a class...

Can anybody help me find more articles on this issue ? Thanks

react-props reactjs render
2 Answers

You must note that classes are instantiated while Functional components are executed.

Now when instantiating a class, React takes in the attributes i.e props attached to each instance of the Component and sets it as a class Property within React.Component kind of like

class React.Component {
   constructor(props) {
       this.props = props;
   }

   ...
}

and since class components extend React.Component, you can access the base class properties also using the this reference

However Functional components work on closures and the props are passed to the Functional component as arguments while executing it

const MyComponent = (props) => {
   console.log(props)
}

Classes in Javacript work on prototypes. The render method is defined as a function in your class component which is called by React.Component in its lifecycle. However for a functional component the entire body can be considered as a render method

However with the arrival of hooks there is more focus providing lifecyle like utilities in functional components but the basic design remains the same

user_59281860

Hi there with regards to closures and scopes, hooks are function components therefor if you want to access a variable from an outer scope then closures would be done in a similar fashion as you would in javascript forexample. 

function Example (){
      const [exampletypes, setExampletypes`] = useState('');
// outer scope

     // followed by Inner scope has access to variables of the outerscope. 
function ExampleTwo(){
}

However some differences which make hooks cleaner and more developer freindly :

• In function components there is no this.props /this.state.

• Function components are more concise, cleaner and easier to read and write.

• Syntax is different, and how you manage state, scope and closures.

• For-example componentDidMount in classes is useEffect in functions.

• Better performance i suppose as there is lesser code.

Here are two component comparisons when exporting props with using functions and classes:

 import React, {Component} from 'react'
    export default class Greeting extends Component {
      render() {
        return (
          <View style={{alignItems: 'center'}}>
            <Text style={styles.textSize}>{this.props.name}</Text>
          </View>
        );
      }
    }

and function component with props:

    import React,{useState} from 'react';
    export default function Greeting(props) {
       const [name] = useState(props.name)
        return (
          <View style={{alignItems: 'center'}}>
            <Text style={styles.textSize}>{props.name}</Text>
          </View>
        );
      }

user_104686700
Related