聚焦输入框：useRef与document.getElementById的区别及优势分析

数据老陈

2026-6-14

关于React中useRef对比document.getElementById的优势咨询

我正在学习React教程，当前编写了如下React代码：

import { useRef } from 'react';

const AddItem = ({ newItem, setNewItem, handleSubmit }) => {
    const inputRef = useRef();

    return (
        <form className="addForm" onSubmit={handleSubmit}>
            <input
                ref={inputRef}
                id="addItem"
                type="text"
                value={newItem}
                onChange={(e) => setNewItem(e.target.value)}
            />
            <button
                type="submit"
                onClick={() => inputRef.current.focus()}
                // onClick={() => document.getElementById('addItem').focus()} // What does this do differently?
            >
            </button>
        </form>
    );
};

export default AddItem;

我通过useRef()配合onClick={() => inputRef.current.focus()}实现点击按钮后聚焦输入框的功能，也可无需useRef钩子，通过onClick={() => document.getElementById('addItem').focus()}达成相同效果，想咨询使用useRef方法相比后者有哪些优势？

回答

贴合React组件化设计：React提倡用框架自身的方式管理组件内部资源，useRef是官方提供的DOM引用方案，完全遵循组件封装逻辑，不会绕过React的管控。而document.getElementById是直接操作全局DOM，打破了组件的独立性，在复杂组件场景下容易引发意外问题。
避免ID冲突问题：HTML要求页面内ID必须唯一，如果多个AddItem组件实例同时存在，每个实例的输入框都用id="addItem"会导致ID重复，此时document.getElementById只会找到第一个匹配的元素，后续组件的聚焦功能直接失效。而useRef是组件内部的独立引用，每个实例的ref互不干扰，不存在冲突风险。
性能更高效：document.getElementById每次调用都会遍历整个DOM树查找元素，页面DOM结构越复杂，开销越大。useRef则是直接存储组件内部的DOM元素引用，调用inputRef.current是直接取值，无需遍历DOM，效率更高。
兼容服务端渲染（SSR）：在SSR场景下，服务器端不存在真实的DOM环境，document对象未定义，直接调用document.getElementById会触发报错。而useRef是React原生钩子，能在SSR流程中正常工作，不会出现环境兼容问题。
功能扩展性更强：useRef不仅可以引用DOM元素，还能存储任意可变值（比如定时器ID、组件实例等），是React中通用的引用管理工具。而document.getElementById仅能用于查找DOM元素，功能单一。

内容的提问来源于stack exchange，提问作者David Klempfner