Friday, May 29, 2020

Difference between Functional and Class Components in react.js ?

Functional component  Class Component
 1.A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element. 1.A class component requires you to extend from React.Component and create a render function which returns a React element. This requires more code
 2. you cannot use setState() in your component. 2.you can use setState() in your component.  
 3. It contains less lines of code 3. It contains more lines of codes
 4. It accepts only props 4. It accepts both props and state
5.  syntax
import React from 'react';
import ReactDOM from 'react-dom';

function Welcome(props){
 return <h1>Hello,{props.name}</h1>
}


ReactDOM.render(<Welcome />,document.getElementById('root'));
 5.   syntax
import React from 'react';
import ReactDOM from 'react-dom';

class Welcome extends React.Component{
render(){
 return <h1>Hello,{this.props.name}</h1>
}
}


ReactDOM.render(<Welcome />,document.getElementById('root'));

No comments:

Post a Comment