Reactrefs与组件实例转发全解析

例如：

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" />;
}

这里，inputRef.current将指向实际的<input> DOM元素。

Refs转发的必要性与机制

Refs转发（Ref Forwarding）是React提供的一种技术，允许组件将它接收到的ref属性向下传递给其子组件，无论是原生DOM元素还是另一个React组件。这在构建可复用组件库时尤为重要，因为它允许父组件直接访问子组件内部的DOM节点或组件实例，而无需通过props层层传递回调函数。

React.forwardRef是一个高阶组件（Higher-Order Component），它接收一个渲染函数作为参数。这个渲染函数会接收props和ref两个参数。

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>;
}

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

将Refs转发给类组件实例

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

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

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

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绑定到了它渲染的<input>元素上。因此，ParentComponent中的myInputRef.current最终会指向那个<input>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的实例 */}
        &lt;input value={this.props.value} onChange={this.props.onChange} /&gt;
      </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元素（如

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

本篇关于《Reactrefs与组件实例转发全解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！