Detailed explanation of this reference in React

I plan to write a diary to list the this pointing problems in React. The specific process is based on the three elements of an event: cause, process, and result. Hahahaha!

cause:

As we all know, React is designed to be responsive. Users do not need to manipulate the DOM or data, and the page will be rendered and updated.

When the data is updated once it changes, does it mean updating the entire DOM? Of course not, re-render what has changed. Then we need to compare the DOM before and after the data changes. Directly compare to the real DOM? The performance will be very low. React compares virtual DOM, which is also an object, but compared with the real DOM, it has fewer attributes and is "lighter".

How to write virtual DOM? In native JS, we can use the document.createElement() method to create nodes. React can also use React.createElement(component, props, children), but this writing method can be dazzling when encountering multiple layers of nesting. So JSX came into being. JSX is actually the syntax sugar of React.createElement, but it is more convenient for us to use. We can directly write it in the form of <p id="test">hello</p>.

But the problem arises again! JSX syntax is not recognized by webpack. By default, webpack can only process files with the .js suffix, so you need to use the JavaScript compiler Babel, and Babel has strict mode enabled.

import React, { Component } from 'react'

export default class index extends Component {
    // speak(){
    // console.log(this) // output undefined
    // }
    speak = () => console.log(this) // Output the component render() {
        return (
            <div>
                <button onClick={this.speak}>button</button>
            </div>
        )
    }
}

this essentially refers to its caller. This is bound when the function is running. Ordinary functions in JS are called by window, so it points to window. After strict mode is turned on, it is undefined.

(function(){
    console.log(this) //window
})()

The event passed in JSX is not a string (in native JS, the event listener uses a callback function, while in Vue, a string variable is passed to the listener event), but a function (such as: onClick={this.speak} above). In this case, onClick is an intermediate variable, and React finally calls the function. Because strict mode is turned on, this is undefined, so the this pointer in the processing function will be lost.

go through:

In fact, what we need is that this points to the currently instantiated object, which will undoubtedly make code writing much easier. There are two places in the class component where this refers to the currently instantiated object.

1. Constructor

The this in the constructor of a class component refers to the instance object, which is a feature of ES6 classes.

As we all know, Javascript does not have the concept of class like C++ and JAVA. The implementation of ES6 class is also based on prototype chain.

Before ES6, instantiating an object should be like this:

function Animal(name, age) {
  this.name = name
  this.age = age
}
Animal.prototype.say = function () {
  console.log(this.name)
}
const Dog = new Animal('dog', 3)
Dog.say() //will print out dog in the console

The new operator first generates an empty object {}, then creates a this pointer and points it to the empty object; when the constructor is run, it is equivalent to dynamically adding properties to the object, just like {}.name=dog,{}.age=3. Finally, the generated object is given to Dog.

When we use ES6 class to declare the above class, the code is as follows:

class Animal {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  say() {
    console.log(this.name)
  }
}
const Dog = new Animal('dog', 3)
Dog.say() //will print out dog in the console

The class implementation should be similar to the above, so this refers to the instance object.

2.render function

This in the render function also refers to the instance. Why?

First of all, the render method is on the prototype of the class component. When React finds that the component is defined using a class, it will create an instance of the class. Note that this instance is created by React for you. The instance then calls the render method to convert the virtual DOM into the real DOM, so this in render refers to the instance, after all, it is called by it! Similarly, render is a lifecycle hook, and this in other lifecycle hooks also points to the instance component.

3.bind and arrow functions

To solve this problem, we need two knowledge stores:

(1) bind
Call, apply and bind are all defined on the function prototype to change the function's this pointer. The first parameter passed in is this, and the following parameters are the parameters of fun1.

the difference:

• Call and bind can pass multiple parameters to the called function, while apply puts the parameters into an array.
• call and apply return functions that are executed immediately, bind returns a new function, and bind()() also executes immediately
  
• After using bind to bind this, this in the function cannot be changed, no matter who calls it

let aa = {
    fun1: function(a,b){
        console.log(this)
        console.log(ab);
    }
}        
let bb = {
    fun2: function(a,b){
        console.log(this)
        console.log(a+b);
    }
}

aa.fun1.call(bb,11,22);//bb-11
bb.fun2.apply(aa,[11,22]);//aa 33
aa.fun1.bind(bb,11,22)();//bb -11

(2) Arrow function: Arrow function does not create its own execution context, so the this in the arrow function is the outer this, and it will search for this layer by layer in the outer scope until there is a definition of this.

const A = {
    arrow:() =>{
        console.log(this) //window
    },
    func:function(){
        this.arrow()//window
        console.log(this) //A
        setTimeout(() => {
            console.log(this) //A
        });
    }
}
A.arrow()
A.func()

result:

I know two solutions, hehe!

Method 1: Use bind in the constructor

import React, { Component } from 'react'

export default class index extends Component {
    constructor(){
        super()
        this.speak = this.speak.bind(this)
        /*Solve the this problem in the class: this.speak = this.speak.bind(this), the this in the constructor points to the instance object by default,
      The instance object finds the fnc function on the prototype of the class through the prototype chain, changes its this pointer to the instance object through the bind function, returns a new function, and then gives this new function to the instance and names it fnc*/
    }
    speak(){
        console.log(this) // Output the current instance object}
    render() {
        return (
            <div>
                <button onClick={this.speak}>button</button>
            </div>
        )
    }
}

Method 2: Assigning arrow functions to class properties

import React, { Component } from 'react'

export default class index extends Component {
    speak = () => {
        console.log(this)
    }
    render() {
        return (
            <div>
                <button onClick={this.speak}>button</button>
            </div>
        )
    }
}//If you need to pass parameters, you can use the idea of ​​function currying

Note: Performance Varies

Using arrow functions to solve this problem is less performant because arrow functions are not methods, they are anonymous function expressions, so the only way to add them to a class is to assign them to a property. When we introduced ES6 classes earlier, we can see that ES classes handle methods and properties in a completely different way.

Methods are added to the prototype of the class rather than being defined once per instance.

The class attribute syntax is syntactic sugar for assigning the same attributes to each instance, and is actually implemented in the constructor like this:

    constructor(){
        super()
        this.speak = () => {console.log(this)}
    }

This means that functions are redefined when new instances are created, losing the advantage of JS instances sharing prototype methods. Method 1, however, only adds a bind operation when generating an instance, which has great advantages in terms of efficiency and memory usage.

The above is a detailed explanation of the this pointer in React. For more information about this pointer in React, please pay attention to other related articles on 123WORDPRESS.COM!