不能在循环中动态调用useRef()，因React依赖固定Hook调用顺序匹配状态；正确做法是用单个useRef([])配合回调ref动态赋值数组元素。
不能在循环中动态调用 useRef() 创建多个 ref 变量。这是 React 的硬性规则：所有 Hook（包括 useRef）必须在函数组件顶层或自定义 Hook 顶层调用，不能放在 map、forEach、条件语句或事件回调里。否则会触发 ESLint 警告和运行时错误，比如：
React Hook "useRef" is called in a loop. React Hooks must be called in the exact same order in every component render.
这不是语法限制，而是 React 依赖调用顺序来匹配内部状态的机制决定的。
为什么不能在循环里 useRef？
-
useRef(null)每次调用都会注册一个独立的 Hook 实例； - React 在每次渲染时按固定顺序“数” Hook 调用次数和位置；
- 循环次数不确定（如列表长度变化），会导致 Hook 调用顺序/数量不稳定 → 状态错乱、ref 绑错元素、甚至崩溃。
正确做法：用一个 useRef 存数组 + 回调 ref 动态赋值
核心思路是：
- 用单个
useRef([])创建一个空数组容器； - 在 JSX 渲染时，通过 函数式 ref（callback ref） 把每个 DOM 元素塞进这个数组对应索引位置；
- 后续操作（如滚动、聚焦）直接读取
refs.current[index]即可。
import { useRef, useEffect } from 'react';
function ScrollableList({ items }: { items: string[] }) {
const refs = useRef<(HTMLDivElement | null)[]>([]);
// 确保数组长度与 items 一致（可选，防越界）
useEffect(() => {
if (refs.current.length < items.length) {
refs.current.length = items.length;
}
}, [items.length]);
const scrollToItem = (index: number) => {
refs.current[index]?.scrollIntoView({ behavior: 'smooth' });
};
return (
<div>
{items.map((item, index) => (
<div
key={item}
ref={(node) => {
refs.current[index] = node;
}}
>
{item}
</div>
))}
<button onClick={() => scrollToItem(2)}>滚动到第3项</button>
</div>
);
}✅ 优势：
- 完全符合 Hooks 规则；
- 自动适配列表增删（只要
refs.current数组长度同步即可）； - 支持任意数量子元素，无需手动声明
ref0,ref1,ref2…； - 可直接用于
focus()、getBoundingClientRect()、scrollIntoView()等 DOM 操作。
进阶：用 Map 或对象管理带 key 的 ref（适合非数组索引场景）
如果列表由 id 驱动（如 items: { id: 'a', name: 'Alice' }[]），建议用 Map 或普通对象替代数组，避免索引漂移问题：
const refs = useRef<Map<string, HTMLDivElement | null>>(new Map());
// 渲染时：
<div
ref={(node) => {
refs.current.set(item.id, node);
}}
/>
// 使用时：
const node = refs.current.get('a');
node?.scrollIntoView();比数组更稳定，尤其适用于排序、过滤、异步加载后顺序变动的列表。
不推荐但常见误区
- ✖ 手动写
const ref0 = useRef(); const ref1 = useRef(); …→ 代码冗余、不可扩展； - ✖ 在
map内部调用useRef()→ 直接报错； - ✖ 用
useState<refobject>([])</refobject>替代 →RefObject是只读类型，无法安全赋值current； - ✖ 用
createRef()（类组件 API）在函数组件中 → 不响应更新，且不推荐混用。
关键就一点：ref 的“创建”必须静态，“绑定”可以动态。用一个容器装多个引用，靠 callback ref 做精准投递，既简洁又健壮。
