Lifecycle of Components

In React, Every Component have the Lifecycle ,which we managed in its three phases
The three phases are: Mounting, Updating, and Unmounting.

Mounting

Mounting means inserting elements into DOM,when we mounts the component,Reacts automatically calls its methods by default

• 1. constructor()
• 2. getDerivedStateFromProps()
• 3. render()
• 4. componentDidMount()

Constructor

The constructor() method is called before anything else, when the component is initiated, and it is the natural place to set up the initial state and other initial values. The constructor() method is called with the props, as arguments, and you should always start by calling the super(props) before anything else, this will initiate the parent's constructor method and allows the component to inherit methods from its parent (React.Component).

1import React from 'react';
2import ReactDOM from 'react-dom';
3
4class Header extends React.Component {
5  constructor(props) {
6    super(props);
7    this.state = {favoritecolor: "red"};
8  }
9  render() {
10    return (
11      <h1>My Color is {this.state.favoritecolor}</h1>
12    );
13  }