Daily quality NPM Package Event binding _bindme (detailed react this)

First, Bindme

Official definition: is a helper-to- bind a list of methods to an object reference

Understanding: Because it is not recommended to build a function in render () , the author encapsulates the code of the function binding event with 6 lines of code.
Bindme's NPM package is actually made up of 6 lines of ES5 code, but it's really handy. This bag is worth the use of.

II. usage instead of arrow function and multi-layer bind

Sometimes we do not directly in the creation of the eventbind, but unified in the constructor binding event, if a module is large, there will be a good dozens of lines bound event code, withbindmecan be well solved. For example,

/ / Original writing
this.clickEvent1 = this.clickEvent1.bind(this)
this.clickEvent2 = this.clickEvent2.bind(this)
this.clickEvent3 = this.clickEvent3.bind(this)
this.clickEvent4 = this.clickEvent4.bind(this)
this.clickEvent5 = this.clickEvent5.bind(this)

//bindme
Bindme(this, ‘clickEvent1‘, ‘clickEvent2‘, ‘clickEvent3’, ‘clickEvent4’, ‘clickEvent5’)

It's nice and convenient.

You can alsosuperbind when you build an instance

bindme(super(props),
    ‘clickEvent1‘,
    ‘clickEvent2‘,
    ‘clickEvent3‘,
    ‘clickEvent4‘,
    ‘clickEvent5‘,
)

Just so simple to use, we can see how it's converted into ES6.

const bindme = (self, ...funcs) => {
  funcs.forEach(func => {
    if (self[func]) {
      self[func] = self[func].bind(self)
    } else {
      console.error(`Method ${func} is not defined`)
    }
  })
}

In fact, that is to collect all the events, and then unify bind, if there is no exception thrown. We usually encapsulate some of these small, handy operations

Combined with react

Import React,{ PureComponent } from ‘react‘

Import bindme from ‘bindme‘
Import ‘./style.css‘
Export default class BindmeComp extends PureComponent{
    Constructor(props){
        Bindme(super(props),
            ‘bindmeOnMouseOver’
        )

        this.initClickMode = this.initClickMode.bind(this)
        
        Bindme(this, ‘bindmeFirClickMode‘, ‘bindmeSecClickMode’)
    }

    noThisClickMode(){
        Console.log (‘unbound this event =========>‘, this)
    }

    initClickMode(){
        Console.log(‘normal bind event ===========>‘, this)
    }

    arrowClickMode = () => {
        Console.log(‘arrow function bind event ===========>‘, this)
    }

    bindmeFirClickMode(){
        Console.log(‘bindme event 1 ===========>‘, this)
    }

    bindmeSecClickMode(){
        Console.log(‘bindme event 2 ===========>‘, this)
    }

    bindmeOnMouseOver(){
        Console.log(‘bindme event 3 ===========>‘, this)
    }

    Render(){
        Return(
            <div>
                <div className="list">
                    <span>This event is not bound</span>
                    <button onClick={ this.noThisClickMode }>Click</button>
                </div>
                <div className="list">
                    <span>Normal bind event</span>
                    <button onClick={ this.initClickMode }>Click</button>
                </div>
                <div className="list">
                    <span>arrow function event</span>
                    <button onClick={ this.arrowClickMode}>Click</button>
                </div>
                <div className="list">
                    <span>bindme</span>
                    <button onClick={ this.bindmeFirClickMode }>Click</button>
                </div>
                <div className="list">
                    <span>bindme2</span>
                    <button onClick={ this.bindmeSecClickMode } >Click</button>
                </div>

                <div className="list">
                    <span>bindme3</span>
                    <button onMouseOver={ this.bindmeOnMouseOver } >Slide over</button>
                </div>
            </div>
        )
    }
}

The above basically covers the common event binding situation. What do we have to do to see what we can output?

As you can see, except for the first this is undefined, the others are properly bound to the component

Extend the React this

We first from the most familiar with JS'sthistalk;

Interviewers often ask, what is this?this pointing to?
Generally speaking:
Who calls thatfunction, the This function points to this caller

There is a special case, ES6 's arrow function, is also an interviewer's favorite thing (but it really works), because the arrow function does not exist this, so its this is inherited from the previous layer. So you can conclude that the this of the arrow functions always points to the object at the time of construction, Instead of the object when it is used

In addition, the arrow function has some characteristics different from ordinary functions, such as: Can not be used as a constructor, that is, nonew. You can't useargumentsattributes, and so on.

A short sentence is:
The normal function this is dynamic, and the arrow function's this is static

Let's elaborate on react's this.

Because the react component isclassconstructed, all of the properties in the component can be obtained through this, for example, the property state that we use frequently. You canthis.state.xxxget

So we just have to make sure this is always pointing to the constructed object (the component), so we don't normally create a function through functions (which makes this dynamic point to the object calling function), and:

The method of the react component class does not have a default binding of this to the component instance and requires manual binding.

So the method of binding this is derived; there are four commonly used, we will generally use the constructor inside the bind

/ / highest priority
Constructor(props){
     Super(props);
    
     this.handleEvent = this.handleEvent.bind(this)
}

This is like binding directly to a build event, right?

<input onChange={this.handleEvent.bind(this)} />

Although the principle is the same, but the performance is a big cut. Why?

We know that as long as thestatevalue changes, it will cause render to re-render, and if you create the event bindings directly, then each time the rendering needs to be re-bound once, will greatly reduce performance. In contrast, whenever a binding is made at construction time, no matter how many times it is rendered, the binding is still once

In addition, there are more commonly used arrow function binding method and::binding method
The knowledge of the arrow function This is also described earlier, so the appearance of the react is quite high.

handleEvent = () => {
    ...
}

<input onChange={this.handleEvent} />

::Although this can also be bound, it is not often used because parameters cannot be passed

handleEvent = () => {
    ...
}

<input onChange={::this.handleEvent} />

Daily quality NPM Package Event binding _bindme (detailed react this)