深入理解React中Refs、DOM组件与类组件实例的转发机制

分类

深入理解React中Refs、DOM组件与类组件实例的转发机制2025-10-12 08:41:01

本文旨在阐明react中“dom组件”在refs转发语境下的确切含义，并详细探讨如何通过`react.forwardref`机制将refs转发给原生html元素（即dom组件）以及自定义的react组件实例，特别是类组件实例。我们将通过代码示例深入解析这一过程，帮助开发者更好地理解和应用refs，从而实现对底层dom节点或组件实例的直接访问。

在React应用开发中，Refs提供了一种访问DOM节点或React组件实例的方法。通常情况下，React推崇声明式编程，避免直接操作DOM。然而，在某些特定场景下，如管理焦点、文本选择、媒体播放、触发命令式动画或集成第三方DOM库时，Refs变得不可或缺。

理解“DOM组件”与Refs

在React的文档和讨论中，当提及“DOM组件”时，它通常指的是原生HTML元素，例如

、

将Refs转发给类组件实例

React文档中提到：“Refs转发不仅限于DOM组件。你也可以将Refs转发给类组件实例。”这句话的核心在于强调ref可以指向的不仅仅是原生DOM节点，还可以是自定义React组件的实例。

Delphi 7应用编程150例全书内容 CHM版

Delphi 7应用编程150例 CHM全书内容下载，全书主要通过150个实例，全面、深入地介绍了用Delphi 7开发应用程序的常用方法和技巧，主要讲解了用Delphi 7进行界面效果处理、图像处理、图形与多媒体开发、系统功能控制、文件处理、网络与数据库开发，以及组件应用等内容。这些实例简单实用、典型性强、功能突出，很多实例使用的技术稍加扩展可以解决同类问题。使用本书最好的方法是通过学习掌握实例中的技术或技巧，然后使用这些技术尝试实现更复杂的功能并应用到更多方面。本书主要针对具有一定Delphi基础知识

1 查看详情 Delphi 7应用编程150例全书内容 CHM版

当我们将一个ref转发给一个类组件时，这个ref的current属性将指向该类组件的实例。这意味着我们可以通过这个ref访问类组件内部的方法和属性。

考虑以下场景：我们有一个自定义的ClassComponent，它内部渲染了一个元素。我们希望父组件能够直接获取到ClassComponent的实例，或者通过ClassComponent的实例间接操作其内部的。

import React, { useRef, useEffect } from 'react';

// 定义一个类组件
class ClassComponent extends React.Component {
  // 可以在这里定义一些方法，供父组件通过ref实例调用
  focusInput = () => {
    if (this.inputElement) {
      this.inputElement.focus();
    }
  };

  render() {
    // 将接收到的innerRef（转发过来的ref）绑定到内部的input元素
    // 或者，如果ref是用来获取ClassComponent实例本身的，则不需要绑定到内部元素
    return (
      <input
        value={this.props.value}
        onChange={this.props.onChange}
        ref={(el) => {
          this.inputElement = el; // 内部管理input DOM节点
          if (this.props.innerRef) {
            // 如果有innerRef，将其current属性设置为ClassComponent实例
            // 或者根据需求，将其设置为内部的input DOM节点
            // 这里我们假设innerRef是用来获取input DOM节点的
            if (typeof this.props.innerRef === 'function') {
                this.props.innerRef(el);
            } else if (this.props.innerRef) {
                this.props.innerRef.current = el;
            }
          }
        }}
      />
    );
  }
}

// 使用React.forwardRef将父组件的ref转发给ClassComponent
// 这里的渲染函数接收到的ref，将作为props传递给ClassComponent
const InputWithRef = React.forwardRef(function (props, ref) {
  // 将父组件传来的ref作为innerRef prop传递给ClassComponent
  // 这里的ref会指向ClassComponent的实例（如果ClassComponent没有将它再转发给内部DOM）
  // 或者指向ClassComponent内部的DOM节点（如果ClassComponent内部进行了处理）
  // 关键在于ClassComponent如何处理这个innerRef
  return <ClassComponent {...props} innerRef={ref} />;
});

// 父组件使用InputWithRef
function ParentComponent() {
  const myInputRef = useRef(null); // 这个ref将指向ClassComponent的实例或其内部DOM

  useEffect(() => {
    if (myInputRef.current) {
      // 假设ClassComponent的innerRef绑定到了内部input，那么这里是input DOM节点
      // 如果ClassComponent没有将innerRef绑定到内部input，而是直接将ref指向自身实例，
      // 那么这里就是ClassComponent的实例。
      // 为了清晰起见，我们修改ClassComponent，让innerRef指向其内部input DOM。
      myInputRef.current.focus();
    }
  }, []);

  return <InputWithRef ref={myInputRef} value="Hello" onChange={() => {}} />;
}

在上述代码中，InputWithRef通过React.forwardRef接收到一个ref，并将其作为innerRef属性传递给ClassComponent。ClassComponent内部将这个innerRef绑定到了它渲染的元素上。因此，ParentComponent中的myInputRef.current最终会指向那个DOM节点。

如果我们的目标是获取ClassComponent的实例，而不是其内部的DOM节点，那么ClassComponent内部就不需要将innerRef绑定到DOM元素，而是让React.forwardRef机制自动将ref.current设置为ClassComponent的实例。

// 改进后的ClassComponent，不直接处理innerRef，让forwardRef处理
class ClassComponentInstanceExample extends React.Component {
  // 假设有一些方法需要被父组件调用
  doSomething = () => {
    console.log("ClassComponentInstanceExample method called!");
  };

  render() {
    return (
      <div>
        <p>This is a class component.</p>
        {/* 这里不再将props.innerRef绑定到内部DOM，
            让React.forwardRef自然地将父组件的ref指向这个ClassComponent的实例 */}
        <input value={this.props.value} onChange={this.props.onChange} />
      </div>
    );
  }
}

// 使用React.forwardRef将父组件的ref转发给ClassComponentInstanceExample
// 注意：React.forwardRef只能将ref转发给函数组件或类组件，
// 如果转发给类组件，ref.current将是该类组件的实例。
const ClassComponentWrapper = React.forwardRef(function (props, ref) {
    // 将ref直接绑定到ClassComponentInstanceExample
    return <ClassComponentInstanceExample {...props} ref={ref} />;
});

// 父组件使用ClassComponentWrapper
function ParentComponentWithInstanceRef() {
  const classInstanceRef = useRef(null);

  useEffect(() => {
    if (classInstanceRef.current) {
      console.log("Ref points to:", classInstanceRef.current);
      // 现在classInstanceRef.current是ClassComponentInstanceExample的实例
      classInstanceRef.current.doSomething(); // 调用实例方法
    }
  }, []);

  return <ClassComponentWrapper ref={classInstanceRef} value="Instance Ref" onChange={() => {}} />;
}

在这个更清晰的例子中，ClassComponentWrapper将父组件的ref直接绑定到了ClassComponentInstanceExample上。因此，ParentComponentWithInstanceRef中的classInstanceRef.current将直接指向ClassComponentInstanceExample的实例，允许父组件调用其doSomething等方法。

总结与注意事项

DOM组件在Refs语境下特指原生HTML元素（如
Refs转发允许父组件通过React.forwardRef机制将ref传递给子组件，无论是原生DOM元素还是自定义React组件。
当ref转发给一个类组件时，ref.current将指向该类组件的实例。这使得父组件能够访问类组件内部的方法和状态（尽管通常应避免直接操作组件内部状态）。
当ref转发给一个函数组件时，由于函数组件没有实例，ref.current将默认为null，除非该函数组件内部使用了useImperativeHandle来暴露特定的命令式API。
最佳实践： 仅在必要时使用Refs。过度使用Refs可能导致代码难以维护，因为它打破了React的单向数据流原则。优先考虑通过props传递数据和回调函数。

通过对“DOM组件”概念的澄清以及Refs转发机制的深入理解，特别是其在类组件实例上的应用，开发者可以更有效地利用Refs来解决特定场景下的需求，同时保持React应用的结构清晰和可维护性。

以上就是深入理解React中Refs、DOM组件与类组件实例的转发机制的详细内容，更多请关注其它相关文章！

# 本书 # 网站搜索优化怎么做的 # 桐城市网站seo优化外包公司 # 济宁推广营销运营 # 淮安建筑材料网站建设 # 外贸推广怎么做营销策略研究报告 # 黔西南谷歌seo # 建设网站可以赚钱吗 # 临夏柳州网站推广 # 承德高端网站建设与维护 # 揭阳百度推广找谁营销 # 当我们 # 因为它 # 将其 # react # 在这个 # 设置为 # 回调 # 自定义 # 绑定 # 转发给 # html元素 # 应用开发 # 回调函数 # app # 浏览器 # html

相关栏目：【企业资讯168 】【行业动态20933 】【网络营销52431 】【网络学院91036 】【运营推广7012 】【科技资讯60970 】

分享到：

上一篇：html视频怎么实现自定义播放_html视频J*aScript控制

下一篇：解决J*aScript控制CSS动画无法重复播放的问题

快速导航×

理解“DOM组件”与Refs

Refs转发的必要性与机制

将Refs转发给类组件实例

总结与注意事项