Evite las funciones de flecha y vincule accesorios JSX para un rendimiento óptimo

La herramienta lint de React tiene como objetivo mejorar las prácticas de código resaltando problemas potenciales. Un mensaje de error común es "Los accesorios JSX no deben usar funciones de flecha". Esto señala los efectos perjudiciales del uso de funciones de flecha o enlaces dentro de accesorios JSX.

Por qué las funciones de flecha y enlaces obstaculizan el rendimiento

La incorporación de funciones de flecha o enlaces a accesorios JSX tiene implicaciones de rendimiento:

• Recolección de basura: Cada vez que se crea una función de flecha, la anterior se descarta. Si se representan varios elementos con funciones en línea, puede generar animaciones entrecortadas.
• Representación: Las funciones de flecha en línea interfieren con los mecanismos de comparación superficial utilizados por PureComponents y los componentes que emplean el método shouldComponentUpdate. A medida que la propiedad de la función de flecha se recrea cada vez, se detecta como un cambio de propiedad, lo que desencadena una reproducción innecesaria.

Impacto de los controladores en línea en la reproducción

Considere estos ejemplos:

Ejemplo 1: PureComponent sin Inline El botón de clase Handler

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    console.log('render button');
    return Click;
  }
}

En este código, el componente Botón solo se representa cuando sus accesorios cambian, como se espera para un PureComponent.

Ejemplo 2: PureComponent con controlador en línea

const Button = (props) => {
  console.log('render button');
  return  props.onClick()}>Click;
};

Debido a la función de flecha en línea, Button ahora se vuelve a representar cada vez, aunque el estado del componente permanece sin cambios. Esta repetición innecesaria puede afectar significativamente el rendimiento.

Prácticas recomendadas

Para evitar estos problemas de rendimiento, se recomienda seguir las siguientes prácticas recomendadas:

• Defina sus controladores de eventos fuera de JSX: Extraiga funciones de flecha o vincule métodos en variables separadas declaraciones.
• Utilice este enlace: Para componentes de clase, vincule controladores de eventos a esto en el constructor.
• Utilice funciones de orden superior: Considere usando funciones de orden superior como map o bindActionCreators para un manejo de eventos más eficiente en JSX.