Buscar..


Introducción

Tema para notas importantes sobre el comportamiento específico del método Component.render.

Funciones en JSX

Para un mejor rendimiento es importante evitar el uso de la función array (lambda) en JSX.

Como se explica en https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md :

Una llamada de enlace o una función de flecha en un prop JSX creará una nueva función en cada render. Esto es malo para el rendimiento, ya que hará que el recolector de basura sea invocado más de lo necesario. También puede causar repeticiones innecesarias si se pasa una nueva función como apoyo a un componente que utiliza la verificación de igualdad de referencia en el elemento para determinar si debería actualizarse.

Así que si tienes bloque de código jsx como este:

                    <TextInput
                      onChangeValue={  value => this.handleValueChanging(value) }
                    />

o

                    <button onClick={ this.handleClick.bind(this) }></button>

puedes mejorarlo

                    <TextInput
                      onChangeValue={  this.handleValueChanging }
                    />

y

                    <button onClick={ this.handleClick }></button>

Para el contexto correcto dentro de la función handleValueChanging, puede aplicarlo en el constructor del componente:

          constructor(){
            this.handleValueChanging = this.handleValueChanging.bind(this)
          }

más en vincular una función pasada a un componente

O puede usar soluciones como esta: https://github.com/andreypopp/autobind-decorator y simplemente agregue @autobind decorator a cada methos que desee enlazar a:

        @autobind
        handleValueChanging(newValue)
        {
            //processing event
        }


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow