react组件中的this

时间：2024-06-08 15:07:23

在React类组件中，如果你使用传统的函数声明方式定义一个方法( function xxx)，那么这个方法内部的 this 通常是 undefined。这是因为JavaScript函数中的 this 是在运行时基于函数是如何被调用的来绑定的，而不是在定义时。
例如：

class MyComponent extends React.Component {
  handleClick() {
    console.log(this); // 这里的this可能是undefined
  }
  function handleClick() {
    console.log(this); // 这里的this可能是undefined
  }
  
  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

在这个例子中，handleClick 方法是在 MyComponent 类中定义的。当你在JSX中这样使用它：

<button onClick={this.handleClick}>Click me</button>

handleClick 函数实际上是被作为一个普通函数传递给 onClick 事件的，而不是作为对象方法调用。因此，当事件触发时，handleClick 中的 this 指向的是全局对象（在非严格模式下）或者 undefined（在严格模式下），而不是 MyComponent 的实例。

为了解决这个问题，你有几个选择：

  1. 使用箭头函数：箭头函数没有自己的this指针，它会捕获其在定义时所处的上下文中的this指针，从封闭的上下文中继承 this，这就是所谓的this绑定。因此，如果你使用箭头函数定义handleClick函数的话，this 将会正确地指向组件实例。
handleClick = () => {
  console.log(this); // 这里的this将指向组件实例
}
  1. 在构造函数中绑定 this：你可以在构造函数中显式地绑定 this 到事件处理函数。
constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

上面的代码中，在构造函数中可以用 this 读取到 function 声明的方法，因为构造函数是在组件实例的上下文中执行的。然而，在 handleClick 方法内部，如果没有通过 bind 方法显式地绑定 this，那么 this 将不会自动指向组件实例。这是因为 JavaScript 中的函数在默认情况下不会保留其上下文（即 this 的值），除非它们是作为对象的方法被调用，或者使用了 bind、call 或 apply 方法来显式地设置 this 的值。
3. 使用 public class fields 语法：这是一种ES7的提案，允许你在类中直接定义箭头函数属性，这些属性会自动绑定this。



class MyClass {
  method = () => {
    console.log(this.constructor.name);
  };
  handleClick = () => {
	console.log(this); // 这里的this将指向组件实例
  }
}
 
const instance = new MyClass();
instance.method(); // 输出 MyClass

这就是为什么在类组件的方法中，特别是在事件处理函数中，您经常需要绑定 this 的原因。通过在构造函数中使用 bind 方法，您可以确保 handleClick 方法在调用时始终有正确的 this 上下文，即组件实例。
简而言之，this.handleClick 是组件实例上的一个方法，而在构造函数中绑定 this 是为了确保在方法内部 this 指向组件实例，即使在它作为回调函数被传递给其他组件或方法时也是如此。

选择哪种方法取决于你的个人偏好和项目需求。箭头函数和 public class fields 语法通常更简洁，也更不容易出错。

注意：public class fields是ES7提案中的特性，在某些环境中可能需要Babel等转译器支持。

相关文章