深入理解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元素，例如

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

function MyInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus(); // 直接访问DOM节点并调用其方法
    }
  }, []);

  return <input ref={inputRef} type="text" />;
}

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 在父组件中使用
function App() {
  const buttonRef = useRef(null);

  useEffect(() => {
    if (buttonRef.current) {
      buttonRef.current.focus();
    }
  }, []);

  return <FancyButton ref={buttonRef}>Click Me</FancyButton>;
}

将Refs转发给类组件实例

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

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

当我们将一个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组件与类组件实例的转发机制的详细内容，更多请关注其它相关文章！