react
的 ref
回调函数
在 dom 元素挂载时接收真实节点，在卸载时接收 null，这是 react 保证 ref 状态与 dom 生命周期严格同步的机制，并非类型错误或 bug。
在使用函数式 ref（如 ref={el => ...}）时，React 会
主动且确定地
在两个关键时机调用该回调：
✅
挂载时
：DOM 元素成功插入文档后，传入对应的 HTMLInputElement 实例；
❌
卸载时
：元素被移除（例如数组长度变化、条件渲染导致组件消失、父组件重渲染等），React 会再次调用该 ref 回调，并传入 null —— 这是为了显式通知你“该引用已失效”，避免悬挂引用（dangling reference）和内存泄漏。
因此，你代码中 el: HTMLInputElement | null 的类型是完全正确且必要的。若忽略 null 分支，直接赋值 inputsRef.current[i] = el，虽然运行时通常无异常，但会在元素卸载后将 null 写入数组，后续若未做空值检查就调用 inputsRef.current[i]?.focus() 等方法，将导致静默失败或运行时错误。
✅ 正确写法（安全、健壮）：
? 关键注意事项：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
必须添加 key
：map 渲染列表时缺失 key 会导致 React 复用 DOM 节点，ref 回调可能被错误触发（如本应卸载却未收到 null），引发 ref 数组错位；
不要依赖 useRef 初始值做逻辑判断
：inputsRef.current 初始化为空数组，但其长度不随渲染自动更新，需手动维护（如配合 useEffect 清理，或改用 createRef + 数组映射）；
批量操作前建议过滤 null
：例如聚焦第一个有效输入框时，应写为
总结：null 不是“意外”，而是 React 的契约式设计——它赋予你精确控制引用生命周期的能力。拥抱 HTMLInputElement | null 类型，主动处理 null 分支，是编写可维护、可预测 React DOM 交互代码的必要实践。
export default function SomeArray() {
const inputsRef = useRef([]);
return (
<>
{[1, 2, 3].map((_, i) => (
{
if (el) {
// 挂载：存入有效节点
inputsRef.current[i] = el;
} else {
// 卸载：清理对应位置，避免残留 null 或旧节点
inputsRef.current[i] = null;
}
}}
/>
))}
);
} const firstValid = inputsRef.current.find(el => el !== null);
firstValid?.focus();