Class Component and Functional Component in React JS | React JS | EP - 4

Опубликовано: 28 Январь 2022
на канале: JAS ACADAMY

155

Functional components are some of the more common components that will come across while working in React. These are simply JavaScript functions. We can create a functional component to React by writing a JavaScript function.

Class Component: This is the bread and butter of most modern web apps built in ReactJS. These components are simple classes (made up of multiple functions that add functionality to the application).

A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element.where as a class component requires you to extend from React. Component and create a render function which returns a React element.

There is no render method used in functional components.but in class component It must have the render() method returning HTML

Functional component also known as Stateless components as they simply accept data and display them in some form, that they are mainly responsible for rendering UI.where as class component also known as Stateful components because they implement logic and state.

React lifecycle methods (for example, componentDidMount) cannot be used in functional components.but in class component React lifecycle methods can be used inside class components (for example, componentDidMount).

Hooks can be easily used in functional components.

example: const [name,SetName]= React.useState(‘ ‘).

It requires different syntax inside a class component to implement hooks.

example: constructor(props) {

super(props);

this.state = {name: ‘ ‘}

}

#reactjs #reactjstutorial #nodejs #reactjs #classcomponent #functionalcomponent

#jasacadamy