Вопрос для собеседования — React (4): Как реализовать привязку событий в React? Сколько существует способов?

1. Механизм привязки событий React

В React привязка событий реализуется через синтаксис JSX. Вы можете привязать обработчики событий непосредственно к атрибутам элементов, например onClickи onMouseOverт. д. Когда соответствующее событие инициируется, будет вызван обработчик связанного события.

React использует механизм синтетических событий ( SyntheticEvent​​) для инкапсуляции базовых собственных событий браузера для достижения межбраузерной согласованности. Этот механизм обеспечивает одинаковое поведение обработки событий в разных браузерах и платформах, что снижает проблемы совместимости.

Во-вторых, различные методы привязки событий.

В React существует множество способов привязки событий. Ниже приведены некоторые распространенные способы:

1. Привяжите функцию-обработчик событий в конструкторе:

Этот метод подходит для ситуаций, когда некоторые операции инициализации необходимо выполнить в конструкторе. Привяжите обработчик событий в конструкторе и явно thisпривяжите его к обработчику.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Button clicked');
  }

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

Привязка обработчика событий в конструкторе требует дополнительного кода, что немного громоздко, но это официально рекомендуемый способ.

2. Явное связывание во время вызова:

Когда вызывается обработчик событий, он явно привязывается через привязку this.

class MyComponent extends React.Component {
  handleClick() {
    console.log('Button clicked');
  }

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

Новые функции создаются каждый раз при рендеринге, что может повлиять на производительность.

3. Используйте функции стрелок:

Характер стрелочных функций позволяет автоматически привязывать текущий контекст без дополнительных шагов привязки. Этот метод более краток и позволяет избежать thisпроблем с привязкой вручную.

class MyComponent extends React.Component {
  handleClick = () => {
    console.log('Button clicked');
  };

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

Синтаксис краток, и текущий контекст автоматически привязывается без дополнительных шагов привязки.

4. Передайте функцию стрелки напрямую (рекомендуется):

В событии триггера напрямую передайте стрелочную функцию, такую ​​как следующий код, который также можно автоматически привязать, thisчтобы сделать код более понятным.Другим преимуществом этого метода является то, что передавать параметры очень удобно.

class MyComponent extends React.Component {
  handleClick() {
    console.log('Button clicked');
  }

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

Параметры передачи стрелочной функции

class MyComponent extends React.Component {
  handleClick(name, age) {
    console.log("name is ",name," age is ",age);//name is jack, age is 18
  }

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

Это удобнее при передаче параметров, а внутри стрелочной функции можно передавать любые параметры.