react-native
Mejores Prácticas de Render
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
}