您如何确保方法在React组件类中具有正确的上下文？

  • Z时代
  • 2024-01-10
  • 分类：综合

在JavaScript类中，默认情况下不绑定方法。这意味着它们的 this 上下文可以更改（对于事件处理程序，可以更改为正在侦听事件的元素），并且不会引用组件实例。为了解决这个问题， 可以使用强制  上下文作为组件实例。Function.prototype.bind()this

constructor(props) {
  super(props);
 this.handleClick= this.handleClick.bind(this);
}
handleClick() {
  // 执行一些逻辑
}

  • 该 bind 方法可能很冗长，并且需要定义一个 constructor，因此通常首选新的公共类字段语法：

handleClick = () => {
  console.log('this is:', this);
}
render() {
  return (
    <button onClick={this.handleClick}>
      Click me
    </button>
  );
}

  • 您还可以使用嵌入式箭头函数，因为this 保留了词法 （指组件实例）：

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

请注意，使用此技术可能会产生额外的重新渲染，因为在渲染上会创建一个新的函数引用，该函数引用会传递给子组件并进行中断 shouldComponentUpdate / PureComponent 浅层相等性检查，以防止不必要的重新渲染。在性能很重要的情况下，最好 bind 在构造函数或公共类字段语法方法中使用，因为函数引用保持不变。

额外信息

  • 您可以将方法绑定到构造函数中的组件实例上下文，可以使用公共类字段语法，也可以使用嵌入式箭头函数。

其他连结

  • 对处理事件做出反应

  • 对将函数传递给组件的React文档

以上是 您如何确保方法在React组件类中具有正确的上下文？ 的全部内容， 来源链接： utcz.com/z/311503.html

回到顶部