Tengo una pregunta respectivo a este código: https://github.com/reactjs/redux/blob/master/examples/async/containers/App.js

específicamente:

  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleRefreshClick = this.handleRefreshClick.bind(this)
  }

Supongo que es una 2 parte de la pregunta.

  1. ¿Por qué necesitas manejar el cambio como una instancia de la clase this.handleChange =, no puedo utilizar las funciones estáticas para handleChange y llame directamente en la clase onClick={handleRefreshClick}> ?
  2. No tengo idea de lo que pasa aquí: this.handleRefreshClick.bind(this)

Gracias

  • Posibles duplicados de el Uso de JavaScript ‘enlazar’ método
  • no exactamente, yo no acabo de entender en el contexto de una clase, especialmente en el número 2
  • No cambia el significado de bind. Utilice bind mantener el ámbito de la this. En el contexto de reaccionar esto le permite llamar a las cosas como this.setState etc.
InformationsquelleAutor Saad | 2016-07-12

5 Comentarios

  1. 39

    Respondió en orden inverso…

    1. this.handleRefreshClick.bind(something) devuelve una nueva función, en la que las referencias a this se refieren a something. Esta es una manera de guardar el valor actual de this, que es en el ámbito de aplicación durante la llamada al constructor, de manera que pueda ser utilizado más tarde, cuando se llama a la función.
    1. Si sus funciones no requieren acceso al estado de sus componentes, a continuación, asegúrese de que, de no necesidad a ellos se unen.

    El argumento en favor de agregar estas líneas al constructor para que las nuevas funciones enlazadas se crean sólo una vez por cada instancia de la clase. Usted podría también utilizar

    onClick={this.handleRefreshClick.bind(this)}

    o (ES6):

    onClick={() => this.handleRefreshClick()}

    pero cualquiera de estos métodos va a crear una nueva función cada vez que el componente se vuelve a presentar.

    • pero haciendo .bind(este) la idea de una clase que encapsula ‘este’ derecho, así que ¿por qué necesito para encapsular el ámbito de aplicación de una función específica cuando la totalidad de la instancia de una clase debe encapsular el ámbito
    • no en JS! Las clases son realmente sólo fantasía funciones; ellos no hacen nada particularmente útil con this.
    • No es bueno para enlazar o utilice la flecha de la función Render, ya que conduce a la reasignación de la función en cada render. El mejor enfoque es el de enlazar en el constructor o utilice la flecha funciones en la clase. medium.freecodecamp.org/…
    • Sí, eso es lo que se dice en mi respuesta 🙂
    • Creo que esta respuesta podría ser mejorado mediante la aclaración de que esto sólo es relevante para ReactJS y en circunstancias normales no es necesario enlazar las funciones a this (en regular JS clases)
    • por el contrario, yo no’ t decir que hay mucho en esta respuesta, que está Reaccionar específicos. Cualquier clase de métodos utilizados en los controladores de eventos tendrá siempre necesidad de this estar obligado, si tienen acceso a las propiedades de la instancia.
    • Hola, soy nuevo en reaccionar y javascript en general, he leído que si se agrega una función de una clase a la que se une a su prototipo. Así que no va a ser capaz de hacer referencia a la función this.handleClick buscando a través de la cadena de prototipos en caso de Reaccionar clases ? Yo no entendía el último punto, explicó a @user1970395, te Están diciendo desde el controlador de eventos es una función en sí misma, this en esa función se refieren al controlador de eventos del this?
    • Estoy diciendo que a menos que explícitamente se unen this a una función, su valor depende del contexto en el que se llama. Reaccionar utiliza en el procesamiento de la función para crear elementos del DOM con los controladores de eventos. Desde el contexto en el que estos eventos se manejan, no hay conocimiento de la clase que estos controladores de eventos pertenecen, a menos que se unen.

  2. 2

    Estas 2 funciones handleChange y handleRefreshClick se transmiten como objetos a otros componentes ,

    Que se unen a esta causa cuando el niño /a componente a llamar a estas funciones que siempre se ejecuta con la APLICACIÓN de contexto.

    Puede quitar estas funciones de la clase, pero todavía usted necesita para unirse a esto ya que sería la actualización de algunas partes de tu APLICACIÓN

  3. 2

    La razón por la que se está haciendo, es para obligar a la this palabra clave para ese objeto. Como dijo Tom, llamar a una función de una clase no significa que no pueda ser llamado con el contexto del objeto que crea esa función.

    Creo que usted podría estar recibiendo confundido porque en Reaccionar ejemplos y tutoriales, el uso de Reaccionar.createClass() HACE enlazar this automáticamente para usted. Así que usted puede estar preguntándose por qué Reaccionar.createClass() lo hace, pero no con ES6 clase de sintaxis.

    Esto es debido a que Reaccionan no quería lío con ES6 especificaciones (unión this a las funciones de su clase no está en la ES6 clase de especificaciones), pero al mismo tiempo, quería dar a sus usuarios la comodidad de ES6 clase de sintaxis. Usted puede leer más acerca de esto más adelante.

    Github problema

    Esperemos que arroja algo de luz sobre por qué pasa eso.

  4. 1

    this depende de cómo se llama a la función, no se cómo/dónde se crea.

    Cuando se mira en el código, se ven dos «este», ¿por qué? Parece raro, ¿verdad?
    La cosa es que no se trata de lo que parece. Es acerca de cómo se llama.

    Básicamente están diciendo. Hey, cuando alguien llama a recordar this significa esta clase. no otra cosa.

    Cuando alguien llama a su clase como: x.yourClass().bind(this) usted está diciendo this no es x pero de la misma clase(con los apoyos y los estados etc.).

    Nota rápida, incluso cuando usted llame directamente a la clase como yourClass() en realidad, se llama window.yourClass() en el navegador, también es por eso que en este caso la este es la ventana.

  5. 0

    Yo personalmente enlazar funciones en el constructor a fin de que sus referencias no cambian en cada re-render.

    Esto es especialmente importante si usted está pasando las funciones de sólo lectura a los niños que no necesita actualizarse cuando sus accesorios no cambian. Yo uso reaccionar-addons-puro-render-mixin para que.

    De lo contrario, en cada uno de los padres de re-procesamiento, la unión va a suceder, nueva referencia de función creará y se pasa a los niños, que va a pensar que los apoyos han cambiado.

Dejar respuesta

Please enter your comment!
Please enter your name here