Pregunta de la entrevista-React (4): ¿Cómo implementar el enlace de eventos en React? ¿Cuántas maneras hay?

1. Reaccionar mecanismo de vinculación de eventos

En React, el enlace de eventos se implementa mediante la sintaxis JSX. Puede vincular controladores de eventos directamente a atributos de elementos, como onClick, onMouseOveretc. Cuando se activa el evento correspondiente, se llamará al controlador de eventos vinculado.

React adopta un SyntheticEventmecanismo de eventos sintéticos () para encapsular los eventos nativos del navegador subyacente para lograr coherencia entre navegadores. Este mecanismo hace que el manejo de eventos se comporte igual en diferentes navegadores y plataformas, lo que reduce los problemas de compatibilidad.

Dos, una variedad de métodos de vinculación de eventos.

En React, hay muchas formas de vinculación de eventos para elegir; las siguientes son algunas formas comunes:

1. Vincule la función del controlador de eventos en el constructor:

Este método es adecuado para situaciones en las que es necesario realizar algunas operaciones de inicialización en el constructor. Vincule el controlador de eventos en el constructor y vincúlelo explícitamente thisal controlador.

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 el controlador de eventos en el constructor requiere código adicional, lo cual es un poco engorroso, pero es una forma oficialmente recomendada.

2. Vincular explícitamente en el momento de la llamada:

Cuando se llama al controlador de eventos, se vincula explícitamente mediante bind this.

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

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

Cada vez que renderizas se crean nuevas funciones, lo que puede afectar el rendimiento.

3. Utilice funciones de flecha:

La naturaleza de las funciones de flecha hace posible vincular automáticamente el contexto actual sin pasos de vinculación adicionales. Este método es más conciso y evita thisel problema de la encuadernación manual.

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

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

La sintaxis es concisa y el contexto actual se vincula automáticamente sin pasos de vinculación adicionales.

4. Pase directamente una función de flecha (recomendado):

En el evento desencadenante, pase directamente una función de flecha como el siguiente código, que también se puede vincular automáticamente thispara que el código sea más claro. Otra ventaja de este método es que es muy conveniente pasar parámetros.

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

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

Función de flecha que pasa 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>;
  }
}

Es más conveniente al pasar parámetros y cualquier parámetro se puede pasar dentro de la función de flecha.