React TypeScript函数组件中useRef的替代方案及性能疑问

嘿，我来帮你拆解这个问题～

一、有没有比useRef()成本更低的获取/设置DOM值的方法？ #

首先得明确：useRef本身已经是React生态中操作DOM的轻量方案之一，它不会触发组件重渲染，只是维护一个可变的引用对象，性能开销非常小。不过针对不同场景，我们可以做一些区分：

• 如果你的需求是管理表单输入值（比如获取/设置input的value），更推荐用受控组件模式：通过useState绑定输入框的value和onChange事件，让React接管状态。这种方式不需要直接操作DOM，更符合React的单向数据流，代码可维护性更高，而且不会有额外的性能负担。
• 如果是像你示例里的DOM副作用操作（比如focus、reset表单、获取元素尺寸/位置），useRef几乎是最优选择。那有没有更“低成本”的原生方法？比如document.getElementById或者querySelector？其实这类方法反而风险更高：React组件的DOM渲染是异步的，直接用原生选择器可能遇到元素未挂载/已卸载的情况，而且代码耦合性强，维护起来更麻烦，实际开发中不推荐。

二、是否应当谨慎使用useRef()？ #

React文档提醒谨慎使用useRef，核心原因是它会跳过React的状态管理机制，如果滥用会让组件状态变得不透明，难以追踪和调试。但这不是说不能用，而是要选对场景：

• ✅ 适合用useRef的场景：
  • 直接操作DOM元素（比如设置focus、滚动到指定位置、获取元素尺寸）
  • 保存不需要触发重渲染的可变值（比如定时器ID、之前的状态值）
  • 像你示例里的初始化表单reset和input focus，完全是合理用法，不需要过度谨慎
• ❌ 不适合用useRef的场景：
  • 管理组件的核心状态（比如表单输入值、UI切换状态），这类场景应该优先用useState或useReducer，让React统一管理状态，避免状态不一致的问题

结合你的代码示例来看：

import React, { useRef, useEffect } from 'react';
const Join: React.FC = () => {
  const fullName = useRef<HTMLInputElement>(null);
  const email = useRef<HTMLInputElement>(null);
  const password = useRef<HTMLInputElement>(null);
  const myForm = useRef<HTMLFormElement>(null);
  useEffect(() => {
    if (myForm.current) myForm.current.reset();
    if (fullName.current) fullName.current.focus();
  }, []);
  return (
    <div>
      <form ref={myForm}>
        <input type='text' ref={fullName} />
        <input type='text' ref={email} />
        <input type='text' ref={password} />
      </form>
    </div>
  )
}

这段代码的用法非常合理：用useRef获取DOM元素，在组件挂载后执行focus和reset操作，完全符合useRef的适用场景，不需要担心“谨慎使用”的问题。

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