使用 useRef 时嵌套 createRef 是冗余且错误的实践-js教程-PHP中文网

使用 useRef 时嵌套 createRef 是冗余且错误的实践

在 React 函数组件中，createRef 仅适用于类组件，与 useRef 混用不仅无意义，还会导致引用失效、重复创建和类型混乱；正确做法是统一使用 useRef 管理多个 DOM 引用，并通过回调 ref 或索引映射精准赋值。

在 react 函数组件中，`createref` 仅适用于类组件，与 `useref` 混用不仅无意义，还会导致引用失效、重复创建和类型混乱；正确做法是统一使用 `useref` 管理多个 dom 引用，并通过回调 ref 或索引映射精准赋值。

React 的 useRef Hook 返回一个可变的、跨渲染持久的 ref 对象，其 current 属性可被任意读写，天然适合作为多个子组件 DOM 节点的容器。而 createRef 是为类组件设计的工厂函数，每次调用都返回全新 ref 实例——在函数组件中将其嵌套于 useRef 初始化值内（如 useRef(audios.map(() => createRef()))）会导致两个严重问题：

逻辑冗余：useRef 已提供稳定引用容器，createRef 的“新建 ref”行为在此毫无必要；
引用失效风险：createRef() 在每次渲染时若被重新执行（如放在 useRef 初始化回调外），会生成新 ref，破坏引用一致性；即使写在 useRef 初始化参数中，也因 createRef 本身不感知 React 生命周期，无法保证与组件实例生命周期对齐。

✅ 正确方案：用 useRef 直接管理结构化数组，配合回调 ref 动态绑定

const audiosRef = useRef([]);

// 渲染时通过回调 ref 精准注入
{audios.map((audio, index) => (
  <audio key="{audio.src}" src="%7Baudio.src%7D" ref="{(el)"> {
      audiosRef.current[index] = el;
    }}
  />
))}</audio>

⚠️ 注意事项：

create-psychological-counselor(心理咨询师数字分身)

name: create-psychological-counselor 心理咨询师创造器创造/蒸馏心理咨询师的数字分身 description: "Create a psychological counselor AI skill, build digital twin of counselor from education/training background, consultation notes, interview transcripts, supervision records,

下载

若需类型安全，应显式声明 ref 类型：
```
const audiosRef = useRef([]);
```
避免在 useRef 初始化中调用任何可能引起副作用或重复创建的函数（如 createRef, new Map(), Date.now() 等），因其仅在首次渲染时执行一次，但内部逻辑若依赖闭包变量则易出错；
若 Audio 组件必须使用 forwardRef，建议将 index 作为 prop 传入，在内部完成 ref.current = el，而非依赖外部回调——更可控、更易测试；

playAudio 中需增加空值校验，防止 current 为 null 时调用 .play() 报错：

function playAudio() {
  audiosRef.current.forEach((audioEl) => {
    if (audioEl && audioEl.readyState >= HTMLMediaElement.HAVE_METADATA) {
      audioEl.play().catch(console.error);
    }
  });
}

总结：React Hooks 生态下，useRef 是函数组件引用管理的唯一标准方式；createRef 应彻底弃用于函数组件上下文。结构化 ref 数组 + 回调 ref 赋值，兼顾性能、类型安全与可维护性，是处理多元素 DOM 引用的最佳实践。