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

Source: Internet
Author: User


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)


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.