详解React中的this指向

2023年6月10日下午11:58 • JavaScript

当使用React构建应用程序时，使用this来引用组件实例中的属性和方法可能会变得稍微复杂。在React组件中，this的值可能是 null、 undefined 或指向其他对象。这可能会导致执行时错误或行为不一致的情况出现。

为什么this指向会变化？

React组件的 this 值会受到许多因素的影响，主要有以下原因：

在类方法中，this 默认指向组件实例。
当在事件处理程序中调用方法时，this 不会指向组件实例，可能会指向DOM元素或其他对象。
可能需要使用bind、箭头函数或方法调用来更改函数的上下文以使 this 指向正确的对象。

解决方案

使用箭头函数

箭头函数不会创建自己的上下文，而是在它创建时继承了父级上下文。因此，在组件中使用箭头函数可以保留正确的 this 上下文。

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me! Count: {this.state.count}
      </button>
    );
  }
}

在上面的示例中，使用了一个箭头函数来定义 handleClick，这样组件实例可以通过 this.setState 来设置状态。

使用bind方法

在某些情况下，箭头函数可能会使您的代码难以阅读，这时可以使用 bind 方法显式地传递 this 上下文。

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me! Count: {this.state.count}
      </button>
    );
  }
}

在上面的示例中，我们没有在 render 方法中使用箭头函数，而是在构造函数中使用 bind 方法来绑定正确的 this 上下文。

示例

来看一个具体的例子，我们有一个组件 MyButton，渲染一个窗口的按钮。当点击按钮时，按钮将弹出一个 JavaScript警报框，表示 this 的值。

class MyButton extends React.Component {
  handleClick() {
    alert(this);
  }

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

上述代码所产生的结果会弹出一个警告框，其中显示在函数 handleClick() 被调用时 this 的值。如果您单击按钮，您会发现this的值不是我们想要的组件实例，而是 undefined 或者 window。这是因为 handleClick 函数没有绑定到组件实例上，因此 this 没有正确地设置。为了更好地处理这个问题，我们可以使用箭头函数或 bind 来绑定正确的 this 上下文。

class MyButton extends React.Component {
  handleClick = () => {
    alert(this);
  }

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

通过在 handleClick 函数前使用箭头函数，我们可以绑定正确的 this 上下文。当您现在单击按钮时，您会看到警告框中显示正确组件实例对象。

另一个示例中，我们创建了一个包含3个按钮的组件 MyButtons，每个按钮上都渲染了数字从1到3。当每个按钮被单击时，它会将它们的数字作为警告框消息显示。这里我们使用了 bind 方法来绑定 handleClick 上下文。

class MyButtons extends React.Component {
  handleClick(num) {
    alert(num);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this, 1)}>1</button>
        <button onClick={this.handleClick.bind(this, 2)}>2</button>
        <button onClick={this.handleClick.bind(this, 3)}>3</button>
      </div>
    );
  }
}

在上面的代码中，我们分别使用 bind 方法绑定了三个按钮的handleClick 方法上下文，并将绑定值设置为 1、2 或 3。当您单击其中一个按钮时，它将显示相应的警告框消息。