Estoy usando componentes con estilo como una solución para diseñar para React. Tienen un buen enfoque que utiliza literales de plantilla para interpolar CSS. Los literales de la plantilla se pasan a los accesorios del componente para que pueda hacer cosas como:
const PasswordsMatchMessage = styled.div` background: ${props => props.isMatching ? 'green' : 'red'}; ` El resultado es un componente que representa una etiqueta div con un fondo verde o rojo según el valor de isMatching . Lo anterior se usaría a través de JSX así:
<PasswordsMatchMessage isMatching={doPasswordsMatch}>...</PasswordsMatchMessage> Cada vez que cambie el valor de los props , esta cadena se volverá a interpolar. Lo que finalmente me lleva a mi pregunta:
¿La función de flecha definida dentro del literal de la plantilla se vuelve a definir cada vez que se interpola el literal de la plantilla?
Si es así, entonces puedo considerar crear funciones fuera del literal de la plantilla y simplemente pasarlas, por ejemplo
const PasswordsMatchMessage = styled.div` background: ${isMatchingFn}; `Sí, definiría una nueva versión de la función cada vez que se interpola el literal de la plantilla. Puede verificarlo definiendo su propia etiqueta que realiza un seguimiento del valor anterior.
var previous; function trackInterpolations(literalParts, interpolated) { if (interpolated === previous) { answer = 'Got the same function'; } else { answer = 'Got a different function'; } previous = interpolated; return answer; }Entonces corre
trackInterpolations`background: ${props => props.isMatching ? 'green' : 'red'};` un par de veces y observe que siempre se evalúa como 'Got a different function' , lo que indica que está creando una nueva función cada vez.
Compara eso con esta versión:
trackInterpolations`background: ${isMatchingFn};` La primera vez que se ejecuta, se evaluará como 'Got a different function' (porque aún no ha visto isMatchingFn ), pero si lo evalúa unas cuantas veces más, siempre dará como resultado 'Got the same function' , porque la referencia de la función se está reutilizando.
Sin embargo, no me preocuparía demasiado por el impacto en el rendimiento en este caso, e iría con lo que sea más legible a menos que realmente note una desaceleración. En comparación con volver a renderizar el div, la sobrecarga de crear una nueva función probablemente no sea muy alta.