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

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

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

理解“DOM组件”与Refs

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

、 ));

// 在父组件中使用 function App() { const buttonRef = useRef(null); useEffect(() => { if (buttonRef.current) { buttonRef.current.focus(); } }, []); return Click Me; }

在这个例子中，App组件将buttonRef传递给FancyButton。FancyButton内部通过React.forwardRef接收到这个ref，并将其进一步转发给了它内部的原生

将Refs转发给类组件实例

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

当我们将一个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 (
       {
          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 ;
});

// 父组件使用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通过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 (
      
        This is a class component.
        {/* 这里不再将props.innerRef绑定到内部DOM，
            让React.forwardRef自然地将父组件的ref指向这个ClassComponent的实例 */}
        
      
    );
  }
}

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

// 父组件使用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直接绑定到了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传递数据和回调函数。