Digamos que tengo el componente React donde renderizo una tabla de datos con lo siguiente. También tengo una columna de tabla llamada Total que es un campo calculado . Sé que se puede calcular dentro de la función representada, por ejemplo: price*qty . Esto también se puede embellecer agregando esto a una función. Pero para cada fila, se llamará a esta función. me parece caro Mi pregunta es, ¿es esta la forma correcta en React cuando se trata de rendimiento?
Alternativamente, puedo llamar a la función de mapa donde calculo los campos de antemano y activar el renderizado. El problema que veo en este enfoque es que parece redundante. Cada vez que cambia la cantidad o el valor del precio, tengo que calcularlo manualmente.
PD: Tengo los datos en estructura en una Interfaz.
En realidad, tengo un gran conjunto de datos para representar, y el cálculo puede volverse un poco complejo. ¿Cuál es la mejor manera de abordar esto?
[{"name": "Plumbing", "price": 50, "qty": 3}, {"name": "Fixing", "price": 150, "qty": 1}, {"name": "Welding", "price": 145, "qty": 9}]Si la cantidad de cada fila cambia independientemente de otras filas, crearía un componente para representar la fila y haría que el componente poseyera la lógica para actualizar su cantidad y, por lo tanto, su Total
Esto garantizaría que solo se vuelva a representar la fila cuya cantidad cambió, en lugar de toda la tabla.
const Table = () => { const rows = [ { name: 'Plumbing', price: 50, qty: 3, }, { name: 'Fixing', price: 150, qty: 1, }, ] return (<div> {rows.map(r => <TableRow key={r.name} name={r.name} qty={r.qty} price={r.price} />} </div> ); } const TableRow = ({name, qty, price}) => { const [quantity, setQuantity] = React.useState(qty) const handleQtyChanged = (event) => setQuantity(event.target.value) return (<p> <span>{name}</span> <input value={quantity} onChange={(e)=> handleQtyChanged(e)} /> <span>{quantity * price}</span> </p>) }