React中利用useRef在useEffect中获取并操作组件DOM元素-js教程-PHP中文网

React中利用useRef在useEffect中获取并操作组件DOM元素

DDD

发布： 2025-10-10 12:56:15

原创

795人浏览过

React中利用useRef在useEffect中获取并操作组件DOM元素

本教程详细阐述了如何在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(
        <Form.Control onLoad={auto_grow} as="textarea" value={text} aria-label="Chat Input"/>
    )
}

登录后复制

这种方法存在挑战，因为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元素上。

百度文心百中
百度大模型语义搜索体验中心

22

查看详情
```
<div ref={myRef}>这是一个需要访问的DOM元素</div>
```
登录后复制
访问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-bootstrap

const 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 (
        <Container style={{ paddingTop: '.5rem' }}>
            <InputGroup>
                <InputGroup.Text>Bot</InputGroup.Text>
                <Form.Control
                    ref={textareaRef} // 将ref绑定到Form.Control组件
                    style={textareaStyle}
                    as="textarea"
                    value={text}
                    aria-label="Chat Input"
                    onChange={(e) => setText(e.target.value)} // 允许用户输入时更新状态
                />
            </InputGroup>
        </Container>
    );
}

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元素的详细内容，更多请关注php中文网其它相关文章！