在 React 函数组件中，不应在 useRef 初始化时调用 createRef——它不仅冗余，还违背 Hooks 设计原则；推荐直接初始化为 null 数组，并通过回调 ref 或 forwardRef 精准绑定元素实例。
在 react 函数组件中，不应在 `useref` 初始化时调用 `createref`——它不仅冗余，还违背 hooks 设计原则；推荐直接初始化为 `null` 数组，并通过回调 ref 或 `forwardref` 精准绑定元素实例。
React 的 useRef Hook 本身已提供可变、跨渲染持久的引用容器（即 { current: any } 对象），而 createRef 是专为类组件设计的工厂函数，在函数组件中单独调用 createRef() 并无实际意义——它每次执行都新建一个独立 ref 对象，无法被 Hooks 规则跟踪，且在 useRef(...) 中调用更会造成逻辑混乱与内存浪费。
你原代码中的问题核心在于：
const audioRefs = useRef(
audios.map((audio) => ({
...audio,
ref: createRef<htmlaudioelement>(), // ❌ 冗余且无效
}))
);</htmlaudioelement>
这里 createRef() 被执行于 useRef 初始化阶段，但其返回值（一个普通 ref 对象）并未与任何 DOM 元素关联，也未被 React 渲染系统接管，最终 ref.current 将始终为 null，导致 playAudio() 调用失败。
✅ 正确做法是：用 useRef 直接持有结构化数组，其中每个项的 DOM 引用字段初始化为 null，再通过回调 ref（callback ref）在渲染时动态赋值：
// ✅ 推荐：简洁、符合 Hooks 规范、类型安全
const audioRefs = useRef(
audios.map(audio => ({ ...audio, instance: null }))
);
return (
{audioRefs.current.map((audio, index) => (
<div key="{audio.src}">
{/* 使用回调 ref 绑定 instance */}
<audio ref="{el"> { audioRefs.current[index].instance = el }}
loop
>
<source src="%7Baudio.src%7D" type="audio/mpeg"></source></audio><slider min="{0}" max="{100}" step="{1}" value="{audioRefs.current[index].instance?.volume" onchange="{(val)"> {
audioRefs.current[index].instance?.setVolume(val / 100);
}}
/>
</slider>
</div>
))}
<button onclick="{()"> {
audioRefs.current.forEach(item => item.instance?.play());
}}>
Play All Audio
</button>
>
);
⚠️ 注意事项：
-
避免在
useRef初始化中执行副作用或创建新对象：createRef()每次调用都生成新 ref，若在组件多次渲染中重复执行（如放在useRef()外部或条件逻辑内），可能引发不可预测行为。 -
类型需显式声明：
useRef<t></t>的泛型T应精确匹配数组结构（如含instance: HTMLAudioElement | null），否则 TypeScript 无法保障.instance?.play()的安全性。 -
forwardRef方案更解耦（可选）：若坚持复用<audio></audio>组件，可改造为接收index和refs，由父组件统一管理引用，而非让子组件自行forwardRef—— 这样既保持封装性，又避免 ref 泄漏。
总结：createRef 在函数组件中仅适用于极少数特殊场景（如脱离 React 生命周期的手动 ref 创建），日常 DOM 引用管理应完全交由 useRef + 回调 ref 完成。精简结构、明确生命周期、类型先行，才是现代 React 引用管理的最佳实践。
