React中无需事件监听器获取组件DOM元素：useRef钩子详解

1. 理解问题：在useEffect中直接访问DOM元素

在react函数组件中，我们经常需要在组件挂载后或特定依赖项变化时执行一些副作用操作，例如订阅数据、手动修改dom等。useeffect钩子是实现这些副作用的理想场所。然而，当我们需要在useeffect内部直接访问某个组件所渲染的底层dom元素时，传统的方法如document.getelementbyid可能不够“react化”，或者在组件生命周期中可能无法可靠地获取到元素。

例如，一个常见的需求是实现一个可自动调整高度的文本区域（textarea），使其内容增多时高度自动增长。为了在组件初次渲染后立即设置其初始高度，或者在内容通过props更新后重新调整高度，我们通常希望在useEffect中执行这个操作。但如果仅依赖onChange等事件监听器来获取元素，则无法在组件加载时或内容非用户输入导致变化时触发。

2. 解决方案：使用useRef钩子

React提供了useRef钩子，它允许我们在函数组件中创建可变的引用对象，该对象在组件的整个生命周期中保持不变。最常见的用途之一就是获取对DOM元素的直接引用。

2.1 useRef的工作原理

useRef返回一个可变的ref对象，其.current属性可以保存任何可变的值。当我们将这个ref对象传递给一个JSX元素的ref属性时，React会在该元素挂载时将其对应的DOM节点赋值给ref.current。在元素卸载时，ref.current会被设置为null。

2.2 实现步骤

以下是使用useRef来获取文本区域DOM元素并实现自动调整高度功能的详细步骤：

故事AI绘图神器

文本生成图文视频的AI工具，无需配音，无需剪辑，快速成片，角色固定。

33

查看详情

1. 导入useRef： 在组件文件中，从react中导入useRef钩子。
2. 创建Ref对象： 在函数组件内部调用useRef()来创建一个ref对象。
3. 关联Ref到DOM元素： 将创建的ref对象作为ref属性传递给目标DOM元素（例如<Form.Control as="textarea" ref={myRef} />）。
4. 在useEffect中使用Ref： 在useEffect回调函数中，通过myRef.current来访问关联的DOM元素，并执行所需的DOM操作。

2.3 示例代码：自动调整高度的文本区域

我们将以上述自动调整高度的文本区域为例，展示useRef的实际应用。

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('');
    // 1. 创建ref对象
    const textareaRef = useRef(null); // 初始化为null

    // 自动调整文本区域高度的函数
    const autoGrow = () => {
        if (textareaRef.current) {
            // 获取DOM元素
            const element = textareaRef.current;
            element.style.height = "5px"; // 先将高度重置，以正确计算scrollHeight
            element.style.height = element.scrollHeight + "px"; // 设置为实际滚动高度
        }
    };

    useEffect(() => {
        // 当props.answer变化时更新text状态
        setText(props.answer || '');
    }, [props.answer]);

    useEffect(() => {
        // 2. 在组件挂载后或text状态变化后，使用ref访问DOM元素并调整高度
        // 确保ref.current不为null，因为组件可能尚未渲染
        autoGrow();
    }, [text]); // 依赖text，当text变化时重新调整高度

    return (
        <Container style={{ paddingTop: '.5rem' }}>
            <InputGroup>
                <InputGroup.Text>Bot</InputGroup.Text>
                <Form.Control
                    ref={textareaRef} // 3. 将ref关联到Form.Control组件
                    style={textareaStyle}
                    as="textarea"
                    value={text}
                    aria-label="Chat Input"
                    // onChange={e => setText(e.target.value)} // 如果需要用户输入，可以添加onChange
                />
            </InputGroup>
        </Container>
    );
}

export default ChatInput;

在上述代码中：

• 我们创建了一个textareaRef，并将其绑定到Form.Control组件上。
• 在第二个useEffect中，我们监听text状态的变化。每当text更新时（无论是通过props.answer还是用户输入），autoGrow函数都会被调用。
• autoGrow函数通过textareaRef.current直接访问到textarea的DOM元素，然后调整其height和scrollHeight属性，从而实现高度的自动调整，而无需依赖任何DOM事件监听器（如onLoad或onChange）来获取元素本身。

3. 注意事项与最佳实践

• 避免过度使用DOM操作： 尽管useRef提供了直接访问DOM的能力，但在React中，我们通常推荐尽可能使用声明式的方式来管理UI。只有当React无法通过state和props满足特定需求时（例如，管理焦点、媒体播放、动画集成、测量DOM元素大小等），才考虑直接操作DOM。
• ref.current的生命周期： ref.current在组件挂载后才会被赋值为DOM元素，在组件卸载时会被设置为null。因此，在使用ref.current之前，务必进行null检查，以避免潜在的运行时错误。
• useEffect的依赖数组： 在上述示例中，我们让autoGrow依赖于text状态。这意味着当text变化时，useEffect会重新运行并调整文本区域的高度。如果希望仅在组件初次挂载时执行一次DOM操作，可以将依赖数组设置为空[]，但请确保此时DOM元素已经可用。
• 函数组件与类组件的Ref： 在类组件中，我们使用React.createRef()或回调Ref。useRef是函数组件特有的钩子，提供了更简洁的Ref管理方式。
• 转发Ref（Forwarding Refs）： 如果你的组件是一个自定义组件，并且你想让父组件能够获取到该自定义组件内部某个DOM元素的Ref，你需要使用React.forwardRef。

4. 总结

useRef钩子是React函数组件中一个强大且实用的工具，它为我们提供了一种安全、声明式的方式来直接访问和操作DOM元素。通过将ref对象关联到JSX元素，并在useEffect中利用ref.current，我们可以轻松实现诸如自动调整大小、焦点管理等需要直接DOM交互的功能，而无需依赖传统的事件监听器来获取元素，从而使组件行为更加可控和高效。合理地使用useRef，可以帮助我们更好地处理React中与DOM交互的特定场景。

以上就是React中无需事件监听器获取组件DOM元素：useRef钩子详解的详细内容，更多请关注php中文网其它相关文章！