React Hooks 是“动画”/更改 CSS 类的好主意吗？答案

【问题标题】：Are React Hooks a good idea for "animation" / changing CSS classes?React Hooks 是“动画”/更改 CSS 类的好主意吗？
【发布时间】：2023-03-18 13:30:01
【问题描述】：

我在 react 中创建了一个带有标签的 Slider。当用户移动 Slider 时，下面的数字会突出显示，我通过提供这样的数字类来实现它。

<span
   className={scaleHighlightClass[index]}
   key={index}
   ref={scaleElement}
   onClick={() => handleClickOnScale(index)}
>

scaleHighlightClass 数组使用如下 Hook：

const [scaleHighlightClass, setScaleHighlightClass] = useState<string[]>(["selected"])

当用户移动滑块（type=range 的输入）时，此函数会被触发。

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])
}

它确实按预期工作，但是当使用 Slider 时，它会触发它经过的每个数字的重新渲染。本来是想达到这个效果的，但问题是，这在性能方面有效吗？

有没有更好的方法来动态改变类。

【问题讨论】：

标签： javascript reactjs typescript react-hooks

【解决方案1】：

保存当前选中的索引状态：

const [scaleHighlightIndex, setScaleHighlightIndex] = useState<number>(0)

如果项目的索引与scaleHighlightIndex 匹配，则该项目具有选定的类。当需要选择其他项时，只需将当前索引直接传递给setScaleHighlightIndex即可：

<span
   className={index === scaleHighlightIndex ? 'selected' : ''}
   key={index}
   ref={scaleElement}
   onClick={() => setScaleHighlightIndex(index)}
>

您可以使用 debounce 或 throttle 来防止过多的重新渲染，但在这样做之前先分析一下，看看您确实有性能问题。

【讨论】：

【解决方案2】：

你这样调用函数的方式很多次，也许你可以使用 debounce 来减少代码被执行的次数。

import debounce from 'lodash.debounce';
const debouncedSave = debounce(() => handleClickOnScale(index), 1000);

【讨论】：