En React, puedo llamar a la función en onClick de dos maneras diferentes.
Primer método: función de flecha
const Modal = ({isOpen, toggle, children}) => { <div onClick={() => toggle()}> <div> {children} </div> </div> }Segundo método: sin corchetes
const Modal = ({isOpen, toggle, children}) => { return( <div onClick={toggle}> </div> ) }¿Cuál es la diferencia entre ellos? () => alternar() <-> alternar
La primera forma, onClick={() => toggle()} , crea una nueva función y la asigna a la propiedad onClick . Esa función, cuando se llame, llamará a toggle sin argumentos. Se crea una nueva función cada vez que se procesa ese componente.
La segunda forma, onClick={toggle} , no crea una nueva función, asigna directamente toggle a la propiedad onClick . Eso significa que cuando se llama, recibe los argumentos que se pasan (incluso si no espera ninguno).
Cada uno puede ser apropiado, dependiendo de lo que quieras hacer. Si toggle espera los argumentos que el evento de clic pasará, estará mejor con la segunda forma ya que no está creando una nueva función cada vez. Si no es así, en general es mejor no configurarlo para recibir un argumento que no espera.
El hecho de que la primera forma cree una nueva función en cada renderizado probablemente no importe cuando haces esto con un elemento DOM como un div , pero supongamos que estás pasando una función a un componente complejo que lleva tiempo renderizar y que optimiza renderizar (evitando volver a renderizar si sus accesorios no cambian, a través de React.memo , PureComponent , shouldComponentUpdate , etc.):
return <SomeComplexComponent onSomething={() => toggle()} /> En ese caso, es mejor que "memorice" la función (en este caso, a travésuseCallback o useMemo , por lo general) para que no pase una nueva al componente cada vez, por lo que el componente complejo no lo piensa. necesita volver a renderizar cada vez.
const onSomething = useCallback(() => toggle(), [toggle]); // ... return <SomeComplexComponent onSomething={onSomething} /> Aunque eso todavía crea una nueva función en cada renderizado (para que pueda pasarse a useCallback ), useCallback devolverá la versión anterior de la función si la toggle no ha cambiado, lo que permite que SomeComplexComponent evite volver a renderizar.
Pero no hay necesidad de eso cuando se pasa esto a un elemento HTML o un componente simple.
1er tipo de código
onClick={toggle}En este tipo de método onClick, solo puede llamar a una función dentro de onClick.
2do tipo de código
Supongamos que necesita llamar a varias funciones dentro de onClick. Entonces tienes que usar
onClick={() => toggle()}Ejemplo:-
OnClick = {()=>{ toggle1(); toggle2(); }}Y también puede pasar parámetros dentro de la función. usando el segundo tipo como a continuación. Ejemplo: -
OnClick = {()=>{ person(name); }}En () => toggle() está agregando una función anónima y luego llamando a la función alternar. Si desea pasar algunos argumentos para alternar la función, puede usar este método. por ejemplo () => toggle(id, name..etc)
El otro método simplemente agrega un controlador de eventos y esa función recibirá el evento como argumento.