React类组件中箭头函数可正常工作但普通函数失效的原因探究

I have this React class component:

import React from 'react';
export default class MovieCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = { content: 'test' };
  }
  changer = () => {
    this.setState({ content: 'changed' });
  };
  // changer() {
  //   this.setState({ content: 'changed' });
  // }
  render() {
    return (
      <div>
        <h1>{this.state.content}</h1>
        <button onClick={this.changer}>click me to change</button>
      </div>
    );
  }
}

The commented-out regular function changer should update the component state, but it doesn't work. However, the arrow function version of changer works perfectly and updates the <h1> element's content. Why is this happening? Where's the problem?

Let's break down the core issue here—it's all about how this is bound in JavaScript functions, especially in React class components.

1. The problem with the regular function #

When you define a standard class method like:

changer() {
  this.setState({ content: 'changed' });
}

JavaScript doesn’t automatically bind this to the component instance for these methods. When you pass this.changer as the onClick handler, the function gets detached from its original context. When the button is clicked, the function runs with this set to undefined (React uses strict mode under the hood) instead of your MovieCard instance. That’s why calling this.setState fails—this isn’t pointing to your component, so setState doesn’t exist on it.

2. Why the arrow function works #

Arrow functions don’t have their own this context. Instead, they inherit this from the surrounding lexical scope. When you define changer as an arrow function in the class:

changer = () => {
  this.setState({ content: 'changed' });
};

this is automatically bound to the component instance when the class is initialized. No matter how or where you call this function, this will always refer to your MovieCard component, so this.setState works exactly as expected.

Fixes for the regular function #

If you prefer using standard class methods, here are two reliable ways to fix the binding issue:

• Bind in the constructor: Explicitly tie this to the method when the component is created:

  constructor(props) {
    super(props);
    this.state = { content: 'test' };
    this.changer = this.changer.bind(this); // Bind to component instance
  }
  

• Wrap in an arrow function in the handler: Wrap the method call in an arrow function when passing it to onClick:

  <button onClick={() => this.changer()}>click me to change</button>
  

  This works because the arrow function retains the component’s this context, then calls your regular method with that context intact.

内容的提问来源于stack exchange，提问作者mxd