Summary of constructor and super knowledge points in react components

1. Some tips on classes declared with class in react

As shown above: The Child class is declared using the class keyword and inherits from the React class.

A. What is the type of Child? typeofChild === 'function', which is actually equivalent to the constructor declared by ES5 function Child() { //declare the constructor}

B. When the Child class is called (new Child()), it will be executed first and the Child's constructor function will be automatically executed.

constructor() {
   console.log('constructor executed')
       return 'hah'
   }

   getName() {
       console.log('Method executed')
   }
}
var dd = new Person();
console.log(dd)

Prints as follows:

3. this in the Child class? this points to the instance of Child, which is equivalent to new Child(). So are they completely equal? No, this in react is wrapped based on new Child() (see the figure below).

The above picture shows new Child() The following picture shows this in Child

Conclusion: this is wrapped on the basis of new Child(), including some react internal methods.

At the same time, the Child class ( <div> <Child /> </div> ) is used in the component, which can be seen as new Child() + react package. (Details to be investigated...)

2. Is the constructor in the component necessary? What if not? ? What is the effect? ? ?

Supplementary knowledge of ES6: http://es6.ruanyifeng.com/ is as follows:

class ColorPoint extends Point {
}

// Equivalent to class ColorPoint extends Point {
  constructor(...args) {
    super(...args);
  }
}
// As you can see, the constructor is not written, it will be automatically filled in during execution

According to the inheritance rules of ES6, no matter whether the subclass writes a constructor or not, the constructor will be added in the process of creating a new instance.

Therefore: the constructor hook function is not indispensable, and subcomponents can be omitted in some cases.

Next, let's see what the difference is with or without a constructor hook function:

A. First check whether there is a constructor hook function this.constructor

this.constructor with constructor hook function

this.constructor without constructor hook function

If you look at the details, you will find that when there is a constructor hook function, the Child class will have an additional constructor method.

B. First check whether there is a this in the constructor hook function, that is, the component instance.

This instance has the constructor hook function.

This instance without a constructor hook function.

You will find out that when there is a constructor hook function, you can define the state. If the user does not define the state, there is no difference whether there is a constructor hook function or not.

Conclusion: If a component wants to define its own initial state, it needs to be written in the constructor hook function.

If the user does not use state, props is used to accept parameters, with or without a constructor hook function. The constructor hook function can also be omitted.

Furthermore, if you don't use state, then why not use stateless components (recommended)? ? ?

3. Are props in super necessary? What is the function? ?

Some friends are accustomed to writing props in constructor and super every time they write a component. Is this necessary? ?

As shown in the figure:

First of all, it is important to make clear that:

You don't need to write a constructor. Once you write a constructor, you must write super() in this function.

At this point, the component has its own this, and the this keyword can be used globally in the component.

Otherwise, if it is just a constructor and super() is not executed, then all subsequent this will be wrong! ! !

Source ES6: http://es6.ruanyifeng.com/

But is it necessary to write the parameter props in super? ? The answer is not necessarily. Let’s look at the code first:

With props:

No props:

It can be concluded that when you want to use this.props in the constructor, super needs to be added (props).

At this time, you can use props or this.props, they are the same thing. (However, props can be any parameter, this.props is a fixed writing method).

As shown in the figure:

If this.props or props is not used in the custructor life cycle, props can be omitted.

Below is a scenario using props. Don't forget the componentWillReceiveProps lifecycle at this time.

Refer to another article What you need to know about the life cycle of react

Continued: If the constructor does not receive props through super, in other life cycles,

Can this.props be used directly in componentWillMount, componentDidMount, and render? ?

Conclusion: Yes, react has passed this.props in the life cycle except the constructor, and is not affected by super(props) at all.

Therefore, whether props in super are received can only affect whether this.props can be used in the constructor life cycle. This.props already exists by default in other life cycles.

This is the end of this article about the constructor and super knowledge points in react components. For more relevant react component constructor and super content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!