本教程详细阐述了如何在React函数组件中，不依赖事件监听器，通过useRef Hook在useEffect生命周期中安全有效地获取并操作底层DOM元素。文章以实现文本区域自动高度调整功能为例，演示了useRef的创建、绑定及在useEffect中访问ref.current进行DOM操作的最佳实践，旨在帮助开发者掌握在React中直接与DOM交互的专业方法。
挑战：在React中直接访问DOM元素
在react的声明式编程范式中，我们通常通过状态（state）和属性（props）来驱动ui的更新，避免直接操作dom。然而，在某些特定场景下，例如需要测量dom元素尺寸、管理焦点、播放媒体或集成第三方非react库时，我们仍需直接访问底层的dom元素。
一个常见的需求是实现文本输入框（如textarea）的自动高度调整功能，使其高度根据内容动态变化。为了实现这一功能，我们需要获取textarea元素的scrollHeight属性，并据此设置其height样式。如果尝试在useEffect中直接使用document.getElementById来获取元素，可能会遇到以下问题：
时机问题：document.getElementById可能在组件渲染完成之前被调用，导致无法获取到元素。React上下文：document.getElementById是原生DOM API，它不与React的组件生命周期同步，可能导致在React更新DOM后，获取到的元素引用已失效或不准确。属性缺失：对于某些React封装的组件（如Form.Control），document.getElementById返回的可能是其内部渲染的原始DOM元素，但如果处理不当，直接访问其属性可能不如通过React提供的机制稳定。
例如，在以下代码片段中，开发者尝试在onLoad事件（非标准React事件）或useEffect中直接调用auto_grow函数，并尝试通过document.getElementById获取元素：
// 原始尝试的代码片段（简化）function ChatInput(props){ const [text, setText]=useState(); function auto_grow(element){ // 期望element是DOM元素，但通过事件传递可能带有target， // 而通过getElementById获取的可能直接是元素本身 element.target.style.height = "5px"; element.target.style.height =(element.target.scrollHeight)+"px"; } useEffect(()=>{ setText(props.answer); // 尝试在此处调用auto_grow，但需要一个元素引用 // document.getElementById返回的textarea可能没有预期的属性或行为 },[props.answer]) return( )}
这种方法存在挑战，因为onLoad并非Form.Control组件的标准DOM事件，且直接在useEffect中获取DOM元素需要更React化的方式。
解决方案：使用useRef Hook
React提供了useRef Hook作为在函数组件中访问DOM元素或React组件实例的标准方式。useRef返回一个可变的ref对象，其.current属性可以在组件挂载后指向相应的DOM元素或组件实例。
useRef 的基本用法
创建Ref：在函数组件内部调用useRef()来创建一个ref对象。通常会初始化为null。
import { useRef } from 'react';function MyComponent() { const myRef = useRef(null); // ...}
绑定Ref：将创建的ref对象通过ref属性绑定到你想要访问的JSX元素上。
这是一个需要访问的DOM元素
访问Ref：在组件挂载后，可以通过myRef.current来访问对应的DOM元素。最常见的场景是在useEffect Hook中进行访问。
结合useRef与useEffect实现自动高度文本框
为了解决自动调整文本框高度的问题，我们可以将useRef与useEffect结合使用。useEffect在组件渲染到DOM之后执行，这确保了ref.current能够正确地指向DOM元素。
以下是使用useRef和useEffect重构ChatInput组件，实现textarea自动高度调整的示例：
import React, { useState, useEffect, useRef } from 'react';import { Container, InputGroup, Form } from 'react-bootstrap'; // 假设使用了react-bootstrapconst textareaStyle = { resize: "none", overflow: "hidden", minHeight: "50px", maxHeight: "1000px"};function ChatInput(props) { const [text, setText] = useState(''); // 初始化为空字符串 const textareaRef = useRef(null); // 创建一个ref来引用textarea元素 // 当props.answer变化时更新文本内容 useEffect(() => { setText(props.answer || ''); // 确保props.answer为null或undefined时不会出错 }, [props.answer]); // 使用useEffect来在DOM更新后调整textarea高度 useEffect(() => { if (textareaRef.current) { // 首先将高度重置为较小值，以确保scrollHeight计算准确 textareaRef.current.style.height = "5px"; // 然后设置高度为scrollHeight，实现自动增长 textareaRef.current.style.height = textareaRef.current.scrollHeight + "px"; } }, [text]); // 依赖text，当text内容变化时重新计算高度 return ( Bot setText(e.target.value)} // 允许用户输入时更新状态 /> );}export default ChatInput;
代码解释：
const textareaRef = useRef(null);：在组件内部声明一个ref对象textareaRef，初始值为null。ref={textareaRef}：将textareaRef绑定到Form.Control组件上。当组件渲染时，textareaRef.current将指向由Form.Control渲染的底层textarea DOM元素。useEffect(() => { … }, [text]);：这个useEffect Hook会在组件初次渲染后以及text状态每次更新后执行。if (textareaRef.current)：这是一个重要的安全检查，确保ref对象已经成功关联到DOM元素。在组件挂载之前或条件渲染下，ref.current可能为null。textareaRef.current.style.height = “5px”;：为了准确计算scrollHeight，通常需要先将元素高度重置为较小值，避免之前设置的高度影响scrollHeight的计算。textareaRef.current.style.height = textareaRef.current.scrollHeight + “px”;：获取textarea的scrollHeight（即包含所有内容所需的最小高度），并将其赋值给height样式，从而实现高度自适应。依赖数组[text]：将text作为useEffect的依赖项，确保当text内容发生变化时（无论是通过props.answer更新还是用户直接输入），高度调整逻辑都会重新执行。
注意事项与最佳实践
何时使用useRef：管理焦点、文本选择或媒体播放。集成第三方DOM库。触发强制动画。测量DOM元素的大小和位置。避免过度使用：对于大多数UI更新，应优先使用React的状态和属性管理。useRef是逃生舱口，用于处理无法通过声明式方式解决的问题。ref.current的生命周期：ref.current只在组件挂载后才会有值，在组件卸载时会再次变为null。因此，在useEffect中使用ref.current是安全的，因为它在DOM已经准备好时执行。空值检查：始终在使用ref.current之前进行空值检查（例如if (myRef.current)），以防止在组件尚未挂载或在条件渲染中ref可能为null时引发错误。useEffect依赖：如果DOM操作依赖于组件的某个状态或属性，请务必将其添加到useEffect的依赖数组中，以确保在这些值变化时，DOM操作能及时更新。不可变性：虽然ref.current是可变的，但应避免在渲染过程中（即在组件函数体直接）修改ref.current，这可能导致不可预测的行为。应在useEffect或事件处理函数中进行修改。
总结
useRef Hook为React函数组件提供了一种强大且受控的方式来直接访问和操作DOM元素。通过将其与useEffect Hook结合使用，我们可以在组件生命周期的适当阶段执行必要的DOM操作，例如实现文本框的自动高度调整功能，而无需依赖不稳定的document.getElementById或非标准的事件监听器。掌握useRef的使用是React开发者进阶的重要一步，它使我们能够在保持React声明式优势的同时，灵活应对各种复杂的DOM交互场景。
以上就是React中利用useRef在useEffect中获取并操作组件DOM元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528333.html
微信扫一扫 
支付宝扫一扫 
