在react开发中，我们通常倡导使用声明式的方式构建用户界面，尽量避免直接操作dom。然而，在某些特定场景下，直接访问底层dom元素是必要的，例如：与需要dom引用的第三方库集成、管理表单元素的焦点、控制媒体播放，或者像本例中需要根据内容动态调整文本区域（textarea）的高度。
传统的DOM操作方法，如document.getElementById，在React组件中虽然可以工作，但它不符合React的组件化和声明式编程范式，并且可能导致难以预测的时序问题，尤其是在组件生命周期钩子中。当我们需要在组件挂载后，不通过用户交互事件（如onChange、onClick）来获取DOM元素并执行操作时，useEffect钩子结合useRef就成为了React中处理此类需求的标准且优雅的解决方案。
使用 useRef 钩子获取 DOM 元素
React的useRef钩子提供了一种在函数组件中创建可变引用（ref）的方式。这个引用在组件的整个生命周期中都会保持不变，并且可以通过ref.current属性直接访问到它所关联的DOM元素或组件实例。
useRef 的基本用法步骤：
-
导入 useRef： 首先，从react库中导入useRef钩子。
import { useState, useEffect, useRef } from 'react'; -
创建 Ref 对象： 在函数组件内部调用useRef()来创建一个ref对象。通常，我们会将其初始化为null。
function MyComponent() { const myElementRef = useRef(null); // ... } -
关联 Ref 到 JSX 元素： 将创建的ref对象作为ref属性传递给需要获取其DOM的JSX元素。
<input ref={myElementRef} type="text" />当组件挂载后，React会将该DOM元素的引用赋值给myElementRef.current。
- 在 useEffect 中访问 DOM 元素： 在useEffect钩子中，myElementRef.current将指向实际的DOM元素，此时就可以对其进行直接操作。useEffect是执行副作用的理想场所，因为它在DOM更新后运行。
示例：实现文本区域的自动高度调整
以下示例展示了如何在ChatInput组件中使用useRef和useEffect来实现一个根据内容自动调整高度的textarea，而无需依赖用户输入事件。
import { useState, useEffect, useRef } from 'react';
import { Container, InputGroup, Form } from 'react-bootstrap'; // 假设使用了react-bootstrap
// 文本区域的样式定义
const textareaStyle = {
resize: "none", // 禁用用户手动调整大小
overflow: "hidden", // 隐藏滚动条
minHeight: "50px", // 最小高度
maxHeight: "1000px" // 最大高度
};
function ChatInput(props) {
// 使用useState管理文本内容，初始化为props.answer或空字符串
const [text, setText] = useState(props.answer || '');
// 创建一个ref来引用textarea DOM元素
const textareaRef = useRef(null);
// useEffect用于在props.answer变化时更新text状态
useEffect(() => {
setText(props.answer || '');
}, [props.answer]);
// useEffect用于在组件挂载后或text内容变化时调整textarea高度
useEffect(() => {
// 确保textareaRef.current已指向DOM元素
if (textareaRef.current) {
// 步骤1: 将高度重置为'auto'，以便正确计算新的scrollHeight
// 这一步是关键，它允许浏览器重新评估文本框的自然高度
textareaRef.current.style.height = 'auto';
// 步骤2: 根据元素的scrollHeight（包含内容的实际高度）设置高度
textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
}
}, [text]); // 依赖text，当文本内容变化时重新执行此效果
return (
<Container style={{ paddingTop: '.5rem' }}>
<InputGroup>
<InputGroup.Text>Bot</InputGroup.Text>
<Form.Control
ref={textareaRef} // 将textareaRef关联到Form.Control组件
style={textareaStyle}
as="textarea" // 指定渲染为textarea
value={text}
aria-label="Chat Input"
// 如果需要用户输入，可以添加onChange事件处理函数
// onChange={(e) => setText(e.target.value)}
/>
</InputGroup>
</Container>
);
}
export default ChatInput;在上述代码中：
- 我们通过const textareaRef = useRef(null);创建了一个ref对象。
- 将textareaRef作为ref属性传递给Form.Control组件，使其能够引用底层的textarea DOM元素。
- 在第二个useEffect钩子中，我们首先检查textareaRef.current是否已存在（即组件已挂载且DOM元素可用）。
- 如果存在，我们便可以安全地访问并修改textareaRef.current的style.height属性，利用scrollHeight来计算并设置文本框的实际内容高度。
- 此useEffect的依赖项是text状态，这意味着每当text内容更新时（无论是通过props.answer的改变还是用户输入），textarea的高度都会被重新计算和调整，从而实现自动高度调整功能。
注意事项
- ref.current 的可用性： ref.current在组件首次渲染时可能为null，但在useEffect回调函数执行时，它通常已经指向了DOM元素。因此，在使用ref.current之前，务必进行非空检查，例如if (textareaRef.current)，以避免潜在的运行时错误。
- 避免过度使用 DOM 操作： 尽管useRef提供了直接操作DOM的能力，但它应被视为一种“逃生舱口”。在大多数情况下，React的声明式更新机制和状态管理足以满足需求。只有当确实需要直接访问或修改DOM属性，且React的状态/props管理无法优雅实现时，才考虑使用useRef。
- 性能考虑： 频繁地直接操作DOM可能会影响应用的性能。对于文本区域的自动高度调整，如果文本内容频繁变化，确保你的调整逻辑是高效的，例如，避免不必要的重复计算或DOM操作。
- useEffect 的依赖数组： useEffect的依赖数组至关重要。如果你的DOM操作依赖于组件的props或state，请务必将它们包含在依赖数组中，以确保在这些值变化时重新执行效果。如果只需要在组件挂载时执行一次（例如，设置初始焦点），则使用空数组[]作为依赖。
- 与第三方库集成： useRef在与需要直接访问DOM元素的第三方JavaScript库（如一些图表库、拖放库或动画库）集成时非常有用，因为它提供了一个稳定的DOM引用。
总结
useRef是React函数组件中用于获取和管理DOM元素引用的强大工具。它提供了一种在不依赖事件监听器的情况下，通过useEffect钩子在组件挂载后直接访问和操作DOM元素的有效途径。通过合理利用useRef，开发者可以在需要直接DOM交互的特定场景下，保持React应用的声明式优势，同时解决实际的UI挑战，如实现文本区域的自动高度调整功能。理解并掌握useRef的用法，是成为一名高效React开发者的关键一步。
