In React Native mainly two types of components Class Component & Functional Component.
Class components are ECMAScript2015(ES6) that extend a base class from React called Component. It is used as a container component to handle state management.
Before introducing the concept of hooks in React 16.8 functional component is a plain javascript function but after hooks it maintains have state and lifecycle also.
Class Component Vs Functional Component:-
Class Component:
- In the class component, the render method is used when the state of the component is changed.
- It is a Stateful component.
- It requires extending from React Component and creating render function which returns a React element.
- It is used the Complex lifecycle method.
- Required “this” keyword for referring to the object itself.
- Lifecycle of class components are:-
(a) Mount: It includes methods that are called in the following order when an instance of a component is being created and inserted.
(i)
static getDerivedStateFromProps(props, state) {
console.log(“GetDerivedStateFromProps”);
return null;
}
(ii)
componentDidMount() {
console.log(“ComponentDidMount”);
}
(b) Update: It includes an update that can be caused by changes to props or state. These methods are called in the following order when a component is re-rendered:
(i)
getDerivedStateFromProps(props, state) {
console.log(“GetDerivedStateFromProps”);
return null;
}
(ii)
shouldComponentUpdate(nextProps, nextState) {
console.log(nextProps, nextState);
console.log(this.props, this.state);
return false;
},
(iii)
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log(“GetSnapshotBeforeUpdate”);
return null;
}
(iv)
componentDidUpdate(prevProps, prevState, snapshot) {
console.log(“ComponentDidUpdate”)
}
(c) Unmount: It includes a method is called when a component is removed.
(i)
componentWillUnmount(){
console.warn('componentWillUnmount call')
alert('User has been deleted');
}.
- The basic syntax of class Component using state:-
import React, { Component } from 'react';
import {View,Text,Button} from 'react-native';
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<View>
<Text>count: {this.state.count} times</Text>
<Button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click
</Button>
</View>
);
}
}
Functional Component:
In Functional Component, render the UI based on props.
- It is used a stateless component.
- It is a javascript function that accepts props as an argument and returns a React Component.
- Easier or simpler lifecycle.
- Not Required “this” keyword for referring to object.
- Lifecycle of class components are:-
(a) Mount: It includes when you want to perform an action each time renders and mount.
(i) useEffect( ()=>{},[prop1, prop2])
(ii) useEffect( ()=> {},[]).
(b) Update: It includes when you want to perform an action on component update.
(i) useEffect( ()=>{},[prop1, prop2])
(ii) custom hook used for previous state. useGetSnapshotBeforeUpdate((prevProps, prevState) => {})
(iii)useEffect( ()=>{})
(iv) useMemo().
(c) Unmount: It includes when you want to perform an action only on a component unmount.
(i) useEffect( ()=>{return()=>{//cleanup}},[])
7. Basic Syntax functional component using state:-
import React, { useState } from 'react';
import {View,Text} from 'react-native';
function Example() {
const [count, setCount] = useState(0);
return (
<View>
<Text>You clicked {count} times</Text>
<Button onClick={() => setCount(count + 1)}>
Click me
</Button>
</View>
);
}
