如何用useRef在React中非事件监听获取DOM元素，实现疑问？

在 React 开发过程中。你可能会遇到需要在组件生命周期里访问 DOM 元素的问题——比如想让一个 `` 自动根据内容改变高度、想在页面渲染后立即聚焦某个输入框、或者想读取某个元素的尺寸信息。不过，传统的方法是使用 `document.getElementById` 或 `document.querySelector`。但这往往导致以下痛点：

• 与 React 的声明式编程风格冲突，让代码难以维护。
• 容易出现时序问题——DOM 可能尚未挂载，导致引用为空。
• 手动管理查询和清理工作，增加了出错概率。

幸运的是React 提供了 useRef 钩子。它可以让我们在非事件监听场景下安全地获取 DOM 引用，并保持组件的可读性与可维护性。

1. 为什么传统方法会让人头疼

痛点一：时序不确定

如果你直接在函数体内写 const el = document.getElementById;不过， 并马上使用它，很可能在组件第一次渲染时还没有对应元素挂载到 DOM 上。导致 null 或者错误。

痛点二：破坏封装性

直接操作全局文档对象会把业务逻辑和 UI 分离开来使得组件变得难以复用和测试。

痛点三：手动清理麻烦

如果你要添加事件监听或做其它副作用。需要自己记得在卸载时移除，这很容易被忽略。