Soy bastante nuevo en React y he creado una nueva vista en mi empresa. Uso funciones en línea porque muchas guías hacen lo mismo. Todo está escrito como componentes de función.
Escribo onClick así:
onClick: () => onBackClick()Mis compañeros de trabajo dicen que esta es una función de flecha inútil.
Tratará de darle la imagen completa. El componente principal tiene declarada la función onBackClick
const Parent = () => { const onBackClick = () => {backOff} <Child {...{onBackClick}}/> } const Child = ({onBackClick}) => { return ( <MyButton {...{onClick: () => onBackClick() }}/> )}
Mis compañeros de trabajo quieren que lo escriba así:
onClick: onBackClickNo tengo una buena explicación sobre por qué y realmente me gustaría aprender. ¿Puede alguien ser amable de explicar por qué esta es una mejor manera de escribirlo?
Saludos.
Comparar:
const onBackClick = () => { console.log("This does something useful"); }; const onClick = onBackClick; onClick(); const onBackClick = () => { console.log("This does something useful"); }; const onClick = () => onBackClick(); onClick();En el primer ejemplo (a la manera de su compañero de trabajo) hay una función y se pasa de un lado a otro.
En el segundo ejemplo (a tu manera) creas una función completamente nueva que no hace nada excepto llamar a la primera función.
Además de ser redundante, esto genera una ineficiencia adicional en React.
Cuando se vuelve a renderizar el componente, se comprueba si hay cambios en la salida.
Es posible que onBackClick no haya cambiado, pero (cuando se usa a su manera) onClick sí lo ha hecho, por lo que React eliminará el controlador de eventos antiguo del DOM y asignará uno nuevo con la función onClick nueva (pero idéntica) que creó.