javascript - instalar - react js

¿Por qué y cuándo necesitamos vincular funciones y manejadores de eventos en React?

Question

class SomeClass extends Component{
  someEventHandler(event){
  }
  render(){
    return <input onChange={------here------}>
  }
}

Veo diferentes versiones de ------here------ parte.

// 1
return <input onChange={this.someEventHandler.bind(this)}>

// 2
return <input onChange={(event) => { this.someEventHandler(event) }>

// 3
return <input onChange={this.someEventHandler}>

¿Cómo son diferentes las versiones? ¿O es solo una cuestión de preferencia?

Gracias a todos por sus respuestas y comentarios. Todos son útiles, y le recomiendo leer este enlace PRIMERO si está confundido acerca de esto.
http://blog.andrewray.me/react-es6-autobinding-and-createclass/

Answer 1

El enlace no es algo específico para React, sino cómo funciona this en Javascript. Cada función / bloque tiene su propio contexto, para las funciones es más específico de cómo se llama. El equipo de React tomó la decisión de que this no se vincule a los métodos personalizados en la clase (es decir, no a los métodos incorporados como componentDidMount ), al agregar compatibilidad con ES6 (sintaxis de clase).

Cuando debe vincular el contexto depende del propósito de las funciones, si necesita acceder a accesorios, estado u otros miembros de la clase, entonces deberá vincularlo.

Para su ejemplo, cada uno es diferente y depende de cómo esté configurado su componente.

Pre vinculante a tu clase

.bind(this) se usa para vincular el contexto this a la función de sus componentes. Sin embargo, devuelve una nueva referencia de función en cada ciclo de renderizado. Si no desea vincular cada uso de la función (como en un controlador de clic), puede vincular previamente la función.

a. en su constructor haga el enlace. alias

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

segundo. Haga sus funciones personalizadas en las funciones de flecha de grasa de clase. alias

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

Tiempo de ejecución vinculante a su clase

pocas formas comunes de hacer esto

a. puede ajustar la función del controlador de componentes con una función lambda en línea (flecha gruesa).

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

esto puede proporcionar una funcionalidad adicional, como si necesita pasar datos adicionales para el controlador de clics <input onChange={(event) => { this.someEventHandler(event, ''username'') }> . Lo mismo se puede hacer con bind

segundo. puede usar .bind(this) como se describe anteriormente.

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

con parámetros adicionales <input onChange={this.someEventHandler.bind(this, ''username'') }>

Si desea evitar crear una nueva referencia de función pero aún necesita pasar un parámetro, lo mejor es abstraerlo a un componente secundario. Puedes leer mas al respecto aquí

En tus ejemplos

// 1
return <input onChange={this.someEventHandler.bind(this)}>

Esto solo está haciendo un controlador de eventos de tiempo de ejecución enlazar a su clase.

// 2
return <input onChange={(event) => { this.someEventHandler(event) }>

Otro tiempo de ejecución se une a su clase.

// 3
return <input onChange={this.someEventHandler}>

Simplemente está pasando la función como la función de devolución de llamada para que se active cuando se produce el evento de clic, sin parámetros adicionales. ¡Asegúrate de preenlazarlo!

Para resumir. Es bueno pensar en cómo optimizar su código, cada método tiene una utilidad / propósito dependiendo de lo que necesite.

Answer 2

¿Por qué vincular una función React?

Cuando define un componente utilizando una clase ES6, un patrón común es que un controlador de eventos sea un método en la clase. En JavaScript, los métodos de clase no están vinculados por defecto. Si olvida bind this.someEventHandler y pasarlo a onChange , esto no estará definido cuando se llame a la función.

En general, si hace referencia a un método sin () después de él, como onChange={this.someEventHandler} , debe vincular ese método.

Hay tres formas de vincular su función onChange al contexto correcto

primero

return <input onChange={this.someEventHandler.bind(this)}>

En este, usamos bind explícitamente para funcionar para que el evento onChange esté disponible como argumento para eventHandler. También podemos enviar algún otro parámetro con tipo de sintaxis como

return <input onChange={this.someEventHandler.bind(this, state.value)}>

Segundo

return <input onChange={(event) => { this.someEventHandler(event) }>

Esta es una sintaxis de ES6, por la cual podemos especificar los parámetros que queremos pasar a la función someEventHandler . Esto es equivalente a .bind(this) sin embargo, también nos da la flexibilidad de enviar otros atributos junto con el evento como

return <input onChange={(event, value) => { this.someEventHandler(event, value) }>

Tercero

Defina la función someEventHandler utilizando la función de flecha

someEventHandler = () => {
    console.log(this); // now this refers to context of React component
}

Una arrow function no tiene su propio this , se utiliza el valor de this del contexto de ejecución adjunto y, por lo tanto, la función anterior obtiene el contexto correcto.

o atarlo en un constructor como

constructor(props) {
   super(props);
   this.someEventHandler = this.someEventHandler.bind(this);
}


return <input onChange={this.someEventHandler}>

En este método, el evento se adjunta directamente a la función someEventHandler . No se pueden pasar otros parámetros de esta manera