Types of Components in React JS
A Component is considered as the core building blocks of a React application. It makes the task of building UIs much easier. Components are visible elements of ReactJS’s application. Every component works independently but is merged into a single page called a shell page which makes our UI a Single page application. In this blog, we will explore more about the Types of Components in React JS
Two Types of Components:
1. Functional and Class Components
In React, functional components are the simplest way to create components and they don’t have their own state. They are simply JavaScript functions that returns valid HTML or JSX. They can accept the arguments as props.
Syntax:
export function Welcome () {
return <h1>Welcome to the ReactJS Components</h1>
}
Advantages:
1.Functional Component has the simplest syntax than class components.
- Dont have to deal with this keyword
3.Less code than class components
- Easy for testing and debugging.
Disadvantages:
- Functional component don’t have their own states (needs Hooks to maintain the states)
- We cannot use lifecycle methods in functional component
- Performance optimization is difficult in functional components
- Used to create the simple UI.
For Free Demo classes Call: 8237077325
Registration Link: React JS Classes in Pune!
2. Class Components:
Class components are similar to ES6 classes. They are stateful and help to manage complex applications. We can access component life cycle methods to better control the component. The class component uses the render method to render the HTML on the web page.
Syntax:
export class MyComp extends Component
{
constructor ()
{
this. state= {
name: “Neha”
}
}
render ()
{
return <h1>name is {this.state.name} </h1>
}
}
Advantages:
1. Class components are stateful therefore we can better manage the state of components
2. Always a good choice for developing complex components
- Gives better performance optimization with the help of component life cycle methods.
Disadvantages:
- Class components are lengthy and require more code than the functional component
- Used to deal with this keyword which increases the complexity
- 3. Difficult to test and debug
- Sharing business logic between components is difficult.
Conclusion:
According to the recent research functional components are more widely used than class components because of their concise and simplest syntax. Some of the limitations of the functional components have been resolved by the use of hooks in functional component. Still, Class components are not completely obsolete.
So, when want to develop complex applications and maintain a large number of states we can go for class components. And when we want to develop a simple application, we can go for the functional component.
Note: Do watch our latest video: Click Here
Author:-
Shital Chauhan
Call the Trainer and Book your free demo class for React JS now!!!
© Copyright 2020 | SevenMentor Pvt Ltd.