¿Hay algún tipo de diferencia de rendimiento entre las siguientes piezas de código? (Nota: Estos son ejemplos muy simples):
const FunctionalComponent = props => { const a = <span>Hello World</span>; return ( <h1> {a} {props.counter} </h1> ); }; const FunctionalComponent = props => { return ( <h1> <span>Hello World</span> {props.counter} </h1> ); };Parece que no puedo encontrar una respuesta directa para averiguar si hay algún tipo de diferencia de rendimiento entre declarar una variable como esta en un componente funcional VS directamente usando el valor dentro del JSX devuelto (incluso si es solo una pequeña diferencia de rendimiento).
Bueno, el segundo fragmento de código debería ser el más eficiente de usar.
La respuesta directa es que existe una correlación directa entre el tamaño de un script descargado y el rendimiento del lado del cliente.
Obviamente, como dijiste, este es solo un ejemplo simple y el efecto de declarar una variable adicional será insignificante. Sin embargo, a medida que agrega más variables, habrá un rendimiento ligeramente reducido ya que se produce una asignación y recuperación de memoria adicional.
La recuperación ocurre cuando usa la variable después de declararla. En algún lugar del procesamiento de bajo nivel de su secuencia de comandos, el valor de a constante tendrá que recuperarse de la memoria cada vez que lo use. En su ejemplo, en lugar de simplemente agregar <span>Hello World</span> a su dom, está obteniendo <span>Hello World</span> de la memoria (ya que está almacenado en una variable). Y luego se agrega al dom.
La asignación de memoria simplemente se refiere al acto de crear la const y almacenar su valor en la memoria.
Para resumirlo todo: en lugar de que el componente funcional solo devuelva elementos que se agregarán al dom, el componente funcional almacena una constante, obtiene el valor de la constante y luego devuelve los elementos dom. A mayor escala, podría haber una pérdida significativa de rendimiento como resultado de esto.