React中useRef与switch滚动逻辑的优化方案咨询

AI 小北

2026-7-19

优化方案

核心思路是把分散的单个useRef合并为数组形式的ref集合，彻底消除重复的switch分支，让代码更简洁且易于扩展：

步骤1：重构ref声明

将多个独立的useRef替换成一个数组，一次性创建所有需要的ref：

// 初始化包含5个空ref的数组，数量可按需调整
const refs = useRef(Array.from({ length: 5 }, () => React.createRef()));

如果是循环渲染元素的场景，还可以动态绑定ref，无需提前预设数量：

const refs = useRef([]);

// 渲染列表时，为每个元素绑定对应index的ref
{yourDataList.map((item, index) => (
  <div 
    key={index} 
    ref={el => refs.current[index] = el} 
  >
    {item.content}
  </div>
))}

步骤2：简化滚动逻辑

原来的switch语句可以直接替换为一行代码，通过index直接访问数组中对应的ref：

refs.current[index]?.current?.scrollIntoView();

优化后的完整示例

import React, { useRef, useEffect } from 'react';

function ScrollSection({ activeIndex }) {
  const refs = useRef(Array.from({ length: 5 }, () => React.createRef()));

  // 监听index变化，自动滚动到对应区域
  useEffect(() => {
    refs.current[activeIndex]?.current?.scrollIntoView({
      behavior: 'smooth', // 可选：添加平滑滚动效果
      block: 'start'
    });
  }, [activeIndex]);

  return (
    <div className="section-container">
      <div ref={refs.current[0]} className="section">第一部分</div>
      <div ref={refs.current[1]} className="section">第二部分</div>
      <div ref={refs.current[2]} className="section">第三部分</div>
      <div ref={refs.current[3]} className="section">第四部分</div>
      <div ref={refs.current[4]} className="section">第五部分</div>
    </div>
  );
}