digression

I just changed a company, which uses React framework, so I need to learn. , which revealed the common fault of the most ordinary programmer is that the company needs to what, what to learn quickly, for the understanding of knowledge and understanding, only swallowed, of course more project is tightly pressed for time, encounter problems, could be not to want to baidu (PS: where have time to think so much why, get this over with work). So although there are many programmers on the market, but the ability is uneven, the general quality is not high. The ability of nature is big factory, high salary, good treatment, that ability is how to improve, naturally is cumulative. I hope I can keep a trace of thinking ability in the numb work.

instructions

I write things are very basic, hope to see a small understanding. Blogging is more for yourself, consolidating and deepening your understanding of the problem. Of course, the initial ability is insufficient, the understanding of the problem is one-sided or there are mistakes, we hope to timely remind pointed out, thank you very much.

Get to the point

Here is the problem (official website event handling) :


Personal understanding

The figure above defines a Toggle component class that generates a component instance when rendered to the interface using the reactdom.render () method, like new Toggle(), so it’s obvious that this ends up pointing to the newly generated instance.

this.handleClick = this.handleClick.bind(this);








An understanding of two other ways of handling events

In fact, these two ways are easy to understand once you understand what is said above. The first way:

class LoggingButton extends React.Component {
  // This syntax ensures that 'this' in' handleClick 'is bound.
  // Note: this is * experimental * syntax.
  handleClick = (a)= > {
    console.log('this is:'.this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>); }}Copy the code

This is a new way of declaring a handleClick property inside the constructor. The purpose of using the arrow function is to make this point to the current instance after the new operation. Same idea as binding this, this method is present on every instance. The second way:

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:'.this);
  }

  render() {
    // This syntax ensures that 'this' in' handleClick 'is bound.
    return (
      <button onClick={()= > this.handleClick()}>
        Click me
      </button>); }}Copy the code

To understand: In the render() function, the {} function will not be parsed here, this is the component instance, using the arrow function itself does not have this, this points to the component instance and will not change, then call handleClick() method, This inside handleClick() refers to the current component instance, based on who calls this and who this refers to.

conclusion

The above discussion, frankly speaking, is the problem that this points to, not the problem of React, of course, this is also a platitude topic. I don’t have a very thorough understanding of this. I hope I have a deep understanding after reading the second part of the first volume of Javascript you Don’t know. I also recommend reading this book.