react js-tutorial

React Constructor

React function Object() { [native code] } is a predefined function that is automatically called upon startup of a react component. In this function, initial data or states can be set that will be displayed for the first time; these data may be “loading data” prior to receiving all data to improve UI effects.

Syntax

See the below two syntaxes. We are calling super here so that we could be able to use this inside constructor. If we do not use super and we will try to use this inside constructor it will throw an error. Constructor in react js is not a mandatory thing to be co

Syntax #1:

With props in super(props): We pass super with props when we wanted to use this.props inside the constructor. Without passing props in the super function of the constructor, it will not work.

constructor(super) {
super(props);
this.state = {
data: 'loading data',
};
}

Syntax #2: Without props in super(props): Here we are not passing props in super function. In this case, we can not use this. props inside the constructor.

constructor(super) {
super();
this.state = {
data: 'loading data',
};
}

How Does React’s Constructor Work?

As you have already seen, every component in the react.js framework is a class that extends the react core library, and whenever a class object is created or initialization takes place, the react function Object() { [native code] } is called first. These calls are done so that the “this” property may be used inside the function Object() { [native code] }. A super function call is made inside the function Object() { [native code] }. It is not necessary to give props within the function Object() { [native code] } for every super call; we only do so if we wish to access “this.props”. In a very general team, we can say that react constructor is a default function for a class to execute on object creation of react component class

Its basic operating principles include a few key components, including

  • Load On Initialization: Each time a component is initialised, all of the initial data is loaded. By loading is meant to be understood as establishing the values of the initial state.
  • No need to Call Manually: Because the function Object() { [native code] } is invoked automatically upon startup, there is no need for us to manually call the function Object() { [native code] } function in the react component.

Lets use a real-world example to demonstrate how it works: Suppose you are designing a page for a customer that lists every product you have available. Since we know that all of the product details are fetched from the server, the customer will have to wait until all of the products are fetched from the other server. The function Object() { [native code] } is crucial in this situation since it allows us to initialise a component and provide the consumer with some basic static items. Because the function Object() { [native code] } is initialised or called automatically, the user won’t see a blank page but rather a set of products.

Example

In this example we are calling ChangeOnClick function, on its first call it will set the “cnt” variable as 6 and each click on it will get increment it’s a value by one and increased value will be visible to us. Here 6 is the value set by the constructor function for the first time and value will keep changing and render will called on each change of cnt value.

Code:

class ChangeOnClick extends React.Component {
constructor(props) {
super(props);
this.state = { cnt: 6 };
}
cntFunction = () => {
this.setState(
{ cnt: this.state.cnt + 1 }
);
};
render() {
return (
<h1 onClick={ this.cntFunction }>
change count on each click: { this.state.cnt }
</h1>
);
}
}
React.render(
<ChangeOnClick/>,
document.getElementById('changeonclick')
);

HTML Code:

<div id="changeonclick">
</div>

See the below screen of output, here the initial value of the output is 6, and it will keep changing with clicks.

Output:

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.