不能在循环中动态调用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([]);
// 确保数组长度与 items 一致（可选，防越界）
useEffect(() => {
if (refs.current.length {
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 htmldivelement null>>(new Map());
// 渲染时：
<div ref="{(node)"> {
refs.current.set(item.id, node);
}}
/>
// 使用时：
const node = refs.current.get('a');
node?.scrollIntoView();<p>比数组更稳定，尤其适用于排序、过滤、异步加载后顺序变动的列表。</p>
<hr>
<h3><strong>不推荐但常见误区</strong></h3>
<ul>
<li>✖ 手动写 <code>const ref0 = useRef(); const ref1 = useRef(); …</code> → 代码冗余、不可扩展；</li>
<li>✖ 在 <code>map</code> 内部调用 <code>useRef()</code> → 直接报错；</li>
<li>✖ 用 <code>useState<refobject>([])</refobject></code> 替代 → <code>RefObject</code> 是只读类型，无法安全赋值 <code>current</code>；</li>
<li>✖ 用 <code>createRef()</code>（类组件 API）在函数组件中 → 不响应更新，且不推荐混用。</li>
</ul>
<hr>
<p>关键就一点：<strong>ref 的“创建”必须静态，“绑定”可以动态</strong>。用一个容器装多个引用，靠 callback ref 做精准投递，既简洁又健壮。</p>
</div></map>
