Scribd
Upload
3 views

React_Updated

The document explains the concept of constructors in ReactJS, emphasizing the importance of calling super(props) to avoid undefined props. It outlines the lifecycle phases of a React component: Initial, Mounting, Updating, and Unmounting, detailing the methods associated with each phase. Each phase serves distinct purposes, such as initializing state, rendering to the DOM, handling updates, and performing cleanup before unmounting.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

React_Updated

The document explains the concept of constructors in ReactJS, emphasizing the importance of calling super(props) to avoid undefined props. It outlines the lifecycle phases of a React component: Initial, Mounting, Updating, and Unmounting, detailing the methods associated with each phase. Each phase serves distinct purposes, such as initializing state, rendering to the DOM, handling updates, and performing cleanup before unmounting.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

ReactJS

Constructor:

The constructor is a method used to initialize an object's state in a class. It


automatically called during the creation of an object in a class.

The concept of a constructor is the same in React. The constructor in a React


component is called before the component is mounted.

When you implement the constructor for a React component, you need to
call super(props) method before any other statement. If you do not call
super(props) method, this.props will be undefined in the constructor and can lead
to bugs.

Syntax

Constructor(props){
super(props);
}
Note: It used for binding event handler methods that occur in your component.

React lets you define components as classes or functions. Components defined as


classes currently provide more features which are described in detail on this page.

To define a React component class, you need to extend React.Component:


class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

Each component has several “lifecycle methods” that you can override to run
code at particular times in the process.

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
A component's lifecycle has three main phases: the Initial Phase,Mounting Phase,
the Updating Phase, and the Unmounting Phase.

1.Initial Phase

It is the birth phase of the lifecycle of a ReactJS component. Here, the component
starts its journey on a way to the DOM. In this phase, a component contains the
default Props and initial State. These default properties are done in the
constructor of a component. The initial phase only occurs once and consists of the
following methods.

o getDefaultProps()
It is used to specify the default value of this.props. It is invoked before the
creation of the component or any props from the parent is passed into it.
o getInitialState()
It is used to specify the default value of this.state. It is invoked before the
creation of the component.

2. Mounting Phase

In this phase, the instance of a component is created and inserted into the DOM.
It consists of the following methods.

o componentWillMount()
This is invoked immediately before a component gets rendered into the
DOM. In the case, when you call setState() inside this method, the
component will not re-render.
o componentDidMount()
This is invoked immediately after a component gets rendered and placed
on the DOM. Now, you can do any DOM querying operations.
o render()
This method is defined in each and every component. It is responsible for
returning a single root HTML node element. If you don't want to render
anything, you can return a null or false value.
3.Updating Phase

It is the next phase of the lifecycle of a react component. Here, we get


new Props and change State. This phase also allows to handle user interaction
and provide communication with the components hierarchy. The main aim of this
phase is to ensure that the component is displaying the latest version of itself.
Unlike the Birth or Death phase, this phase repeats again and again. This phase
consists of the following methods.

o componentWillRecieveProps()
It is invoked when a component receives new props. If you want to update
the state in response to prop changes, you should compare this.props and
nextProps to perform state transition by using this.setState() method.
o shouldComponentUpdate()
It is invoked when a component decides any changes/updation to the DOM.
It allows you to control the component's behavior of updating itself. If this
method returns true, the component will update. Otherwise, the
component will skip the updating.
o componentWillUpdate()
It is invoked just before the component updating occurs. Here, you can't
change the component state by invoking this.setState() method. It will not
be called, if shouldComponentUpdate() returns false.
o render()
It is invoked to examine this.props and this.state and return one of the
following types: React elements, Arrays and fragments, Booleans or null,
String and Number. If shouldComponentUpdate() returns false, the code
inside render() will be invoked again to ensure that the component displays
itself properly.
o componentDidUpdate()
It is invoked immediately after the component updating occurs. In this
method, you can put any code inside this which you want to execute once
the updating occurs. This method is not invoked for the initial render.
4. Unmounting Phase

It is the final phase of the react component lifecycle. It is called when a


component instance is destroyed and unmounted from the DOM. This phase
contains only one method and is given below.

o componentWillUnmount()
This method is invoked immediately before a component is destroyed and
unmounted permanently. It performs any necessary cleanup related task
such as invalidating timers, event listener, canceling network requests, or
cleaning up DOM elements. If a component instance is unmounted, you
cannot mount it again.

You might also like