为什么以及何时应该在 React 中绑定函数和事件处理程序？

为什么以及何时应该在 React 中绑定函数和事件处理程序？

在 React 中，类方法的上下文默认是不绑定的。在这些方法中访问组件的状态或属性时，需要绑定它们的上下文。

函数绑定选项

绑定函数有多种方法：

1.构造函数绑定：

class SomeClass extends Component {
  constructor() {
    super();
    this.someEventHandler = this.someEventHandler.bind(this);
  }

  someEventHandler(event) {}
}

2.粗箭头功能：

class SomeClass extends Component {
  someEventHandler = (event) => {
  };
}

3.内联 Lambda 函数绑定：

onChange={(event) => this.someEventHandler(event)}

4. .bind() 方法绑定：

onChange={this.someEventHandler.bind(this)}

事件处理程序绑定选项

1.内联 Lambda 函数绑定：

onChange={(event) => this.someEventHandler(event)}

2. .bind() 方法绑定：

onChange={this.someEventHandler.bind(this)}

选择绑定方法

合适的绑定方法取决于组件的结构和所需的功能：

预绑定（构造函数绑定或胖箭头函数）：

• 当函数需要访问组件的状态或属性时使用。

运行时绑定（内联 Lambda 函数绑定或 .bind() 方法）：

• 当函数未访问组件的状态或属性时使用。
• 允许附加参数传递给处理程序。

传递附加参数：

• 对于预绑定，将参数作为构造函数中的函数参数传递或使用 fat带有附加参数的箭头函数。
• 对于运行时绑定，请使用内联 lambda 函数或带有附加参数的 .bind()。

示例用法

在提供的代码中snippet:

render() {
  return <input onchange="{this.someEventHandler.bind(this)}">;
}

这是使用 .bind() 方法的运行时绑定，它将 someEventHandler 的上下文绑定到组件实例。

render() {
  return <input onchange="{(event)"> this.someEventHandler(event)} />;
}

这是使用 .bind() 方法的运行时绑定。内联 lambda 函数，还将 someEventHandler 的上下文绑定到组件实例。

render() {
  return <input onchange="{this.someEventHandler}">;
}

这是一个运行时绑定，没有任何其他参数。不过，建议在构造函数中预先绑定 someEventHandler 函数或使用粗箭头函数来确保维护正确的上下文。

以上是为什么以及何时应该在 React 中绑定函数和事件处理程序？的详细内容。更多信息请关注PHP中文网其他相关文章！