Encontré esta pregunta pero no responde mi caso específico, porque las respuestas son antiguas, no respondan todas mis preguntas en esta publicación y en ese caso solo pasan la variable de evento a la función, pero en mi caso podría desea pasar un tipo diferente de valor, como una cadena: Rendimiento de reacción: función anónima frente a función con nombre frente a método
En React, en un componente de función, digamos que tengo un botón:
return <button>Click me</button>Quiero agregarle un evento onClick, pero en lugar de pasar el evento del mouse a la función, quiero enviar otros tipos de datos. ¿Cuál es el patrón correcto (o incluso mejor, el más eficaz)?
El caso de uso sería una cuadrícula con cientos de celdas y cada celda tiene un evento onClick. Supongo que la opción b sería mejor porque solo estamos pasando una referencia, ¿verdad? ¿React moderno tiene algún tipo de optimizaciones para este caso de uso?
a)
const handleClick = (value) => console.log(value); return <button onClick={() => handleClick('hello')}>Click me</button>b)
const handleClick = (value) => () => console.log(value); return <button onClick={handleClick('hello')}>Click me</button>b) a menos que su función handleClick devuelva una nueva función (que actuará como el primer ejemplo), no funcionará porque todo lo que está haciendo es asignar el resultado de llamar a esa función al oyente en lugar de la referencia a la función.
a) funcionará , pero hay mucha documentación que sugiere que volver a vincular las funciones de flecha en cada renderizado conduce a un rendimiento deficiente.
Prefiero hacer onClick={fn} y luego definir la función dentro del componente o fuera de él, o tal vez lo he importado. De cualquier manera, creo que lo hace más legible. Pero eso es una opinión, y muchos desarrolladores tienen diferentes enfoques.
Pero el problema principal es: ¡no adjunte un detector de clics a cada una de las celdas! Eso probablemente conducirá a un problema de rendimiento. En su lugar: a) agregue un oyente a un elemento contenedor ( table , por ejemplo), y luego, use la observación de delegación de eventos para los eventos de las celdas como "burbuja" del DOM. b) Utilice atributos de datos para adjuntar datos específicos a las celdas y recoger sus datos en el controlador de clics del conjunto de datos .
Entonces: un ejemplo artificial para mostrarte esos últimos puntos:
function Example() { // Because we're using event delegation // check to see if the element we clicked on // was actually a table cell, then grab the id // from its dataset function handleClick(e) { if (e.target.matches('td')) { const { id } = e.target.dataset; console.log(id); } } // One listener to rule them all return ( <table onClick={handleClick}> <tbody> <tr> <td data-id="1">One</td> <td data-id="2">Two</td> <td data-id="3">Three</td> </tr> </tbody> </table> ); } ReactDOM.render( <Example />, document.getElementById('react') ); table { border: 1px solid #565656; border-collapse: collapse; } td { border: 1px solid #787878; padding: 0.3em; } td:hover { cursor: pointer; background-color: #dfdfdf; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>