In react-native, there are two types of components such as functional and class components. In this article, I will explain what is the difference between these two and why we use them.
Functional component:
A functional component is a plain javascript function that returns a jsx
import React from "react";
const FunctionalComponent = () => {
return <h1>Hello, world</h1>;
};
You can also use this as follows:
import React from "react";
const FunctionalComponent(){
return <h1>Hello, world</h1>;
};
How to pass props in functional components:
For example, we need to pass the name Shilpa to the component.
<Component name="Shilpa" />
const FunctionalComponent = ({ name }) => {
return <h1>Hello, {name}</h1>;
};
In the above example, we are passing props as an argument of the functional component. We have used the destructuring method. We can also use the following method without destructuring the data:
const FunctionalComponent = (props) => {
return <h1>Hello, {props.name}</h1>;
};
//In this we need to use props.name to show
Class Component:
A JavaScript class that extends React.Component and includes a render function is referred to as a class component. So to define a class component, you must create a class that extends React.Component. The rendered JSX will be returned by the render() function.
import React from "react";
class ClassComponent extends React.Component {
render() {
return <h1>Hello, world</h1>;
}
}
How to pass props in the class component:
class ClassComponent extends React.Component {
render() {
const { name } = this.props;
return <h1>Hello, { name }</h1>;
}
}
In the above example, we need to use this with props as we are using the class component.
A functional component is written shorter and simpler, as seen in the examples, making it easier to design, comprehend, and test. With so many applications, class components might be confusing. Using functional components might help you prevent a mess and keep everything tidy.
People having good knowledge of Financial accounting can get an Accounting Certification Exams from StudySection to increase their chances of getting a job in this field. You can get a foundation level certification if you are new to Financial accounting or you can go for advanced level certification if you have expert level skills in Financial accounting.
