React Hooks用于动画或动态切换CSS类，是否存在性能问题？

性能评估 #

你当前的实现可以跑通功能，但性能不算最优，还存在不符合React开发规范的问题：

• 你直接修改了useState返回的原数组scaleHighlightClass，属于直接变异state的操作，虽然你后续解构了新数组触发更新，但这类写法容易引发隐蔽的状态同步问题
• 每次更新都需要遍历全量刻度数组修改类名，当刻度数量较多（比如超过20个）时，滑动过程中频繁触发的遍历+state更新会带来不必要的计算开销
• 存储全量类名数组属于冗余状态，状态本身的维护成本更高

更优实现方案 #

完全不需要存储全量类名数组，只需要单独存储当前选中的刻度索引即可，实现逻辑如下：

1. 替换state定义 #

只存当前选中的索引值，状态更轻量：

const [selectedScaleIndex, setSelectedScaleIndex] = useState<number>(0)

2. 动态计算类名 #

渲染刻度标签时直接通过索引匹配判断类名，不需要提前存数组：

<span
  className={index === selectedScaleIndex ? "selected" : ""}
  key={index}
  ref={scaleElement}
  onClick={() => handleClickOnScale(index)}
>

3. 简化高亮触发逻辑 #

滑动时直接更新选中索引即可，不需要遍历数组重置：

const highlightSelected = (selectedNumber) => {
  setSelectedScaleIndex(selectedNumber)
}

进一步性能优化（适用于刻度数量多的场景） #

如果你的滑块刻度超过10个，可以把刻度项封装为用React.memo包裹的独立组件，只有选中状态变化的两个刻度项会触发重渲染，其余刻度完全不会更新：

// 封装独立刻度组件
const ScaleItem = React.memo(({ index, selectedIndex, onClick, label }) => {
  return (
    <span
      className={index === selectedIndex ? "selected" : ""}
      onClick={() => onClick(index)}
    >
      {label}
    </span>
  )
})

内容的提问来源于stack exchange，提问作者SirDerRosen