javascript - Difference between class object Method declaration React? - Stack Overflow

admin管理员组

文章数量:1393880

I have seen two ways of declaring methods inside a Class ponent in React

Method 1

class someComp extends React.Component  {  
    handleResetShapes = (e) => {
        e.preventDefault();
        this.setState({state: 'try'});
    }

    render() {}
}

Method 2

class someComp extends React.Component  {  
    handleResetShapes(e) {
        e.preventDefault();
        this.setState({state: 'try'});
    }

    render() {}
}

In that specific example Method 1 worked and the other didn't. However I have seen methods declared as Method 2 and it works fine, just can't provide an example now.

Question

What is the difference and what is that Javascript concept called?

I have seen two ways of declaring methods inside a Class ponent in React

Method 1

class someComp extends React.Component  {  
    handleResetShapes = (e) => {
        e.preventDefault();
        this.setState({state: 'try'});
    }

    render() {}
}

Method 2

class someComp extends React.Component  {  
    handleResetShapes(e) {
        e.preventDefault();
        this.setState({state: 'try'});
    }

    render() {}
}

In that specific example Method 1 worked and the other didn't. However I have seen methods declared as Method 2 and it works fine, just can't provide an example now.

Question

What is the difference and what is that Javascript concept called?

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow edited Oct 17, 2018 at 3:28 Mauricio Sipmann 47566 silver badges2121 bronze badges asked Oct 17, 2018 at 1:53 user3241846user3241846 67733 gold badges99 silver badges2727 bronze badges 1

• 1 just can't provide an example now Please post one, I'd be quite curious to see one where this refers to the instantiated object. – CertainPerformance Commented Oct 17, 2018 at 1:54

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Method 1 is called public class fields syntax, using it and we don't need to worry about the meaning of this in runtime because it's automatically bound. For example:

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

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

---

In Method 2, it's just a normal method on the class, a mon pattern is for an event handler when you define a ponent using an ES6 class

However, when using this method, you have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

class LoggingButton extends React.Component {
  constructor(props) {
    super(props);

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('this is:', this);
  }

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

---

The difference between method 1 and method 2 is about the meaning of this inside the function when the function is actually called.

---

Reference: Handling Events

The difference is in how 'this' is handled.

For Method 1, you are defining an arrow function within your class. 'this' will always be the lexical scope where the function is defined, in this case the class itself. That remains true regardless of how the function is called. This is very convenient for React event handlers.

For Method 2, you are defining a prototype function within the class. The value of 'this' depends on how the function is invoked. If it were invoked through an instance of the class, 'this' would be the class itself. However, when you reference the function in an event binding, it won't be invoked through the class instance. Instead it will be invoked directly. 'this' is undefined in this case.

For Method 2 to work, you would have to do the following:

class someComp extends React.Component  {  
  constructor(props) {
    super(props);
    this.handleResetShapes = this.handleResetShapes.bind(this);
  }

  handleResetShapes(e) {
    e.preventDefault();
    this.setState({state: 'try'});
  }

   render() {...}
}

This creates a new handleResetShapes function where the value of 'this' is permanently set to the class instance.

Other cases where Method 2 would work would be those that have no reference to 'this'.

Yes, both of them will work.
It depends how the methods are called when event is triggered.
For Method1:
<button onClick={this.handleResetShapes}>...</button>
For Method2:
<button onClick={(e) => this.handleResetShapes(e)}>...</button>

本文标签： javascriptDifference between class object Method declaration ReactStack Overflow