Creé un control deslizante con etiquetas en reaccionar. Cuando el usuario mueve el Control deslizante, los números debajo se resaltan, lo logré dando la clase de número de esta manera.
<span className={scaleHighlightClass[index]} key={index} ref={scaleElement} onClick={() => handleClickOnScale(index)} > La matriz scaleHighlightClass usa un Hook así:
const [scaleHighlightClass, setScaleHighlightClass] = useState<string[]>(["selected"])Cuando el usuario mueve el control deslizante (que es una entrada con tipo = rango), esta función se activa.
const highlightSelected = (selectedNumber) => { // Reset all others for (var i = 0; i < scaleHighlightClass.length; i++) { scaleHighlightClass[i] = "" } // Set the clicked/slided to as selected setScaleHighlightClass([...scaleHighlightClass]) }Funciona como se esperaba, pero cuando se usa el Control deslizante, se activa una nueva representación para cada número que pasa. Se pretende porque quiero tener este efecto, pero la pregunta es, ¿es efectivo en términos de rendimiento?
¿Hay una mejor manera de cambiar de clase dinámicamente?
Está llamando a la función muchas veces de esta manera, tal vez pueda usar el rebote para disminuir la cantidad de veces que se ejecuta el código.
import debounce from 'lodash.debounce'; const debouncedSave = debounce(() => handleClickOnScale(index), 1000);Guarde el índice seleccionado actual en el estado:
const [scaleHighlightIndex, setScaleHighlightIndex] = useState<number>(0) El elemento tiene la clase seleccionada si su índice coincide con scaleHighlightIndex . Cuando necesite seleccionar otro elemento, simplemente pase el índice actual a setScaleHighlightIndex directamente:
<span className={index === scaleHighlightIndex ? 'selected' : ''} key={index} ref={scaleElement} onClick={() => setScaleHighlightIndex(index)} >Puede utilizar el rebote o la aceleración para evitar demasiados renderizados, pero antes de hacerlo, observe si realmente tiene un problema de rendimiento.