Pergunta da entrevista-React (4): Como implementar a vinculação de eventos no React? Quantas maneiras existem?

1. Mecanismo de vinculação de eventos React

No React, a vinculação de eventos é implementada por meio da sintaxe JSX. Você pode vincular manipuladores de eventos diretamente aos atributos do elemento, como onClick, onMouseOveretc. Quando o evento correspondente for acionado, o manipulador de eventos vinculado será chamado.

O React adota um mecanismo de evento sintético ( SyntheticEvent) para encapsular os eventos nativos do navegador subjacente para obter consistência entre navegadores. Este mecanismo faz com que o tratamento de eventos se comporte da mesma forma em diferentes navegadores e plataformas, reduzindo problemas de compatibilidade.

Dois, uma variedade de métodos de vinculação de eventos

No React, há muitas maneiras de vincular eventos para escolher, a seguir estão algumas maneiras comuns:

1. Vincule a função do manipulador de eventos no construtor:

Este método é adequado para situações onde algumas operações de inicialização precisam ser executadas no construtor. Vincule o manipulador de eventos no construtor e thisvincule explicitamente ao manipulador.

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>;
  }
}

Vincular o manipulador de eventos ao construtor requer código adicional, o que é um pouco complicado, mas é uma forma oficialmente recomendada.

2. Vincule explicitamente no momento da chamada:

Quando o manipulador de eventos é chamado, ele é explicitamente vinculado por meio de bind this.

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

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

Novas funções são criadas toda vez que você renderiza, o que pode afetar o desempenho.

3. Use funções de seta:

A natureza das funções de seta torna possível vincular automaticamente o contexto atual sem etapas adicionais de vinculação. Este método é mais conciso e evita thiso problema da encadernação manual.

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

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

A sintaxe é concisa e o contexto atual é vinculado automaticamente sem etapas adicionais de vinculação.

4. Passe uma função de seta diretamente (recomendado):

No evento de gatilho, passe diretamente uma função de seta, como o código a seguir, que também pode ser vinculado automaticamente thispara tornar o código mais claro.Outra vantagem desse método é que é muito conveniente passar parâmetros.

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

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

Função de seta passando parâmetros

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>;
  }
}

É mais conveniente ao passar parâmetros, e qualquer parâmetro pode ser passado dentro da função de seta.