本文详细介绍了在React函数组件中如何利用useRef Hook安全有效地获取并操作底层DOM元素，以解决诸如文本区域自动伸缩等需求，而无需依赖传统的事件监听器如onChange或onLoad。通过useRef与useEffect的结合，开发者可以精确控制DOM元素的行为和样式，确保组件在渲染后的DOM操作的正确性和React的声明式范式兼容性。
理解React中DOM操作的挑战
在React的声明式编程范式中，我们通常通过状态（State）和属性（Props）来驱动UI的渲染，React会负责高效地更新DOM。然而，在某些特定场景下，我们可能需要直接访问或操作底层的DOM元素，例如：
管理焦点、文本选择或媒体播放。
触发命令式动画。
集成第三方DOM库。
获取DOM元素的尺寸或位置信息（如scrollHeight）。
尝试使用document.getElementById等原生DOM API来获取组件内部的元素通常不是最佳实践，因为它可能导致与React的虚拟DOM管理冲突，并且在组件生命周期或重新渲染时可能无法获取到正确的元素引用。此外，对于像Form.Control这样的React组件（尤其是来自UI库的组件），直接在其上使用onLoad等DOM事件可能不会按预期工作，因为这些事件可能不会传递到底层的DOM元素。
解决方案：useRef Hook
React提供了useRef Hook来解决直接访问DOM元素的需求。useRef允许我们创建一个可变的ref对象，该对象在组件的整个生命周期内保持不变，并且可以持有对任何DOM节点或React组件实例的引用。
useRef 的基本用法
创建Ref对象：
在函数组件内部调用useRef()来创建一个ref对象。通常会初始化为null。
关联到DOM元素：
将创建的ref对象通过ref属性传递给需要获取其DOM引用的JSX元素。
当组件挂载后，myRef.current将指向该
import React, { useRef } from 'react';
function MyComponent() {
const myRef = useRef(null); // myRef.current 初始值为 null
// ...
}