React应用中用浏览器API替代Ref管理焦点是否可靠？

这种直接用getElementById的方式在简单、同步渲染的场景下确实能正常工作，但从React的设计理念和长期维护角度来看，它并不是一个可靠的生产级解决方案——你的同事担心虚拟DOM的问题是有道理的，下面具体说原因和替代方案：

为什么getElementById不可靠？ #

• 虚拟DOM同步时机问题：React的渲染是异步的，比如如果你的深层子组件依赖Redux状态、异步数据加载或者条件渲染，父组件的componentDidMount执行时，目标元素可能还没被挂载到真实DOM上，这时候document.getElementById会返回null，导致调用focus()报错。即使现在能工作，后续业务逻辑变化（比如加了加载状态）就会触发bug。
• ID冲突风险：如果这个组件被复用（比如在列表、模态框的多个实例中），相同的ID会导致getElementById只能拿到第一个匹配的元素，完全达不到你想要的聚焦目标子组件的效果。
• 组件耦合与维护性差：硬编码ID会让父组件和深层子组件强耦合，后续如果子组件被移动、重构或者ID被修改，你必须手动同步父组件的代码，这在复杂应用里很容易遗漏，不符合React声明式、组件解耦的设计思想。

为什么Marcy Sutton会用这种方式？ #

她在课程中使用getElementById大概率是为了演示的简洁性——在一些简单的、单实例的演示场景中，这种方式能快速达到效果，让观众聚焦在核心知识点（比如无障碍）上，而不是陷入复杂的Ref传递逻辑。但这并不意味着它适合生产环境的复杂应用。

更可靠的替代方案（即使结构复杂） #

即使你的应用有大量嵌套和Redux Forms，还是可以用React原生的Ref机制来实现，下面是几种可行的方式：

1. 用forwardRef + useImperativeHandle传递Ref到深层组件 #

如果子组件是你自己写的，可以用forwardRef把父组件的Ref传递到深层的输入组件，再用useImperativeHandle暴露focus方法：

// 深层子组件
const DeepChildInput = React.forwardRef((props, ref) => {
  const inputRef = useRef(null);
  
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  
  return <input ref={inputRef} {...props} />;
});

// 中间嵌套的组件（只需透传ref）
const MiddleComponent = ({ ref, ...props }) => {
  return <DeepChildInput ref={ref} {...props} />;
};

// 父组件
class Parent extends React.Component {
  childRef = React.createRef();
  
  componentDidMount() {
    this.childRef.current?.focus();
  }
  
  render() {
    return <MiddleComponent ref={this.childRef} />;
  }
}

2. 通过回调Ref传递 #

如果嵌套层级太多，透传Ref麻烦，可以用回调Ref的方式，让子组件主动把自己的Ref传给父组件：

// 父组件
class Parent extends React.Component {
  childInputRef = null;
  
  setChildInputRef = (ref) => {
    this.childInputRef = ref;
  };
  
  componentDidMount() {
    this.childInputRef?.focus();
  }
  
  render() {
    return <MiddleComponent setInputRef={this.setChildInputRef} />;
  }
}

// 中间组件（透传回调）
const MiddleComponent = ({ setInputRef, ...props }) => {
  return <DeepChildInput setInputRef={setInputRef} {...props} />;
};

// 深层子组件
const DeepChildInput = ({ setInputRef, ...props }) => {
  const inputRef = useRef(null);
  
  useEffect(() => {
    setInputRef(inputRef.current);
  }, [setInputRef]);
  
  return <input ref={inputRef} {...props} />;
};

3. 针对Redux Forms的特殊处理 #

如果你用的是Redux Forms，可以通过它提供的getRenderedComponent()方法获取到底层的表单组件Ref，然后调用focus：

class Parent extends React.Component {
  formRef = React.createRef();
  
  componentDidMount() {
    // 假设你的表单字段名是"childInput"
    const inputComponent = this.formRef.current.getRenderedComponent();
    inputComponent.focus();
  }
  
  render() {
    return (
      <form ref={this.formRef}>
        <Field name="childInput" component="input" />
      </form>
    );
  }
}

总结 #

虽然getElementById现在能正常运行，但它是一个脆弱的解决方案，很容易在后续的业务迭代中引入难以排查的bug。建议你花点时间换成React原生的Ref方案，这不仅更符合React的设计理念，也能让代码更健壮、更易维护。

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