constructor/super/bind in React usage's what do they specify does?

Question

I looked up what does constructor, super and bind does in General JS.

Example code.

import React from 'react';

class Example extends React.Component {
  constructor(props){
    super(props);
    this.state = { mood: confused }   
    this.doNothing = this.doNothing.bind(this);
  }

  doNothing(){} //I really do nothing

  render(){
    <button onClick={this.doNothing}>I do nothing xD</button>
  }
}

Here is what I understand for now

1. State is an object, in order to create an object within a class I need to use constructor

2. subclass's constructor will override the parent's constructor, I don't know what is in React.Component but I am sure it is important. I think it is also said in React Document:

   Class components should always call the base constructor with props.

3. super will help me do inherit, and super is the replacement of the parent's constructor. If I need to use this in constructor I need to write super and to go further, I need to pass a parament do super(props) to use this.props
4. bindwill create a new function that is bounded well with the object, making sure when the function is called, it will be direct to the right object because for some reason if I don't bind it, my button will be like <button onClick={undefined.doNothing}>, because of some class rule :/ (the optional paraments can also help me set pre arguments which are interesting but that isn't what bothers me)

Here is what I don't understand

1. The meaning of arguments I passed, I have seen some example but they didn't really pass any argument. (The props constructor(props) super(props))
2. The whole bind code looks odd to me, this.doNothing is changed into what? this.this.doNothing? How does it really works, why my button knows where to find it?

I know this is kinda basic but I did try my best looking things up, I will appreciate if anyone can help me out.

Answer 1

When you define a variable using the this keyword, it belongs to the scope of the React class and hence can you used throughout the scope of the React class.

The meaning of arguments I passed, I have seen some example but they didn't really pass any argument.

As far as bind is concerned, .bind takes the context as an argument and returns a function, which when executed will refer to the context of the React class. The rest of the arguments that are passed to bind are made available to the function when it is called.

For example when you write

constructor(props){
    super(props);  
    this.doNothing = this.doNothing.bind(this);
  }

The function that is returned by bind is assigned to a variable doNothing which is defined in the class scope. If you change it to

constructor(props){
    super(props);  
    this.someNewFunction = this.doNothing.bind(this);
}

you will use it like

render(){
    <button onClick={this.someNewFunction}>I do nothing xD</button>
  }

Answer 2

1. State is an object, in order to create an object within a class I need to use constructor

You can create whatever object inside a class. Just that state is a special one in React: it need to be defined in constructor to be used in React component life-cycle.

2. subclass's constructor will override the parent's constructor, I don't know what is in React.Component but I am sure it is important.

constructor, to my understanding, has three jobs: (1) allows access to this.props by super(props), (2) initialises state and (3) binds functions.

3. Your later part is on the point.

4. bindwill create a new function that is bounded well with the object, making sure when the function is called, it will be direct to the right object because for some reason if I don't bind it, my button will be like 'button onClick={undefined.doNothing}>, because of some class rule

this in React component refers to the component itself. Functions provided by React.Component, e.g. render always have this binding to the component, while your own defined functions don't. So <button onClick={this.doNothing}> in render() will not pose any issue, but doNothing() needs to be bound in constructor to get access to this.

The meaning of arguments I passed, I have seen some example but they didn't really pass any argument. (The props constructor(props) super(props))

Look up to point 1. If you use super() instead of super(props), this.props will be undefined inside constructor. It is still accessible in other functions. Here is the original answer to this.

The whole bind code looks odd to me, this.doNothing is changed into what? this.this.doNothing? How does it really works, why my button knows where to find it?

Look up to point 4. this.doNothing().bind(this) allows you to access this inside function doNothing(), including reading state, props and calling other functions of the component. Without binding, this will be undefined inside doNothing().

Answer 3

You already set props yourself without knowing:

 <button onClick={this.doNothing}>

Here onClick will be set to this.doNothing inside of the props passed to the button constructor. To pass props to your Example class one can do:

 <Example color="blue" />

Now in the render method for example you can access it as:

 <button style = {{ color: this.props.color }} > Some button </button>

Through that your components can be reused at different places, as the parent can change their props to define their behaviour.