深入理解React中Refs、DOM组件与Ref转发机制

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

function MyButton() {
  const buttonRef = useRef(null);

  useEffect(() => {
    if (buttonRef.current) {
      console.log('按钮DOM节点:', buttonRef.current);
      buttonRef.current.focus(); // 直接操作DOM
    }
  }, []);

  return (
    <button ref={buttonRef}>
      点击我
    </button>
  );
}

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

// 假设我们有一个FancyButton组件，它是一个函数组件
const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

function ParentComponent() {
  const buttonRef = useRef(null);

  useEffect(() => {
    if (buttonRef.current) {
      console.log('FancyButton内部的DOM节点:', buttonRef.current);
      buttonRef.current.focus();
    }
  }, []);

  return (
    <FancyButton ref={buttonRef}>
      提交
    </FancyButton>
  );
}

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

// 子类组件
class ClassComponent extends React.Component {
  focusInput() {
    console.log('ClassComponent: 内部方法被调用');
    // 假设这里有一个内部的input，我们可以通过内部ref来操作它
    // this.internalInputRef.current.focus();
  }

  render() {
    // innerRef是父组件通过forwardRef传递过来的ref
    return (
      <input
        value={this.props.value}
        onChange={this.props.onChange}
        ref={this.props.innerRef} // 将转发的ref附加到内部input
        placeholder="这是一个类组件的输入框"
      />
    );
  }
}

// 使用React.forwardRef将ref转发到ClassComponent
const Input = React.forwardRef(function (props, ref) {
  // 注意：这里将父组件传递的ref作为props（innerRef）传递给ClassComponent
  // 这样ClassComponent就可以将这个ref附加到它内部的DOM元素上
  return <ClassComponent {...props} innerRef={ref} />;
});

function App() {
  const classComponentRef = useRef(null); // 这个ref将指向ClassComponent的实例

  useEffect(() => {
    if (classComponentRef.current) {
      console.log('获取到的Ref指向:', classComponentRef.current);
      // 如果ref指向ClassComponent的实例，我们可以调用其方法
      // 注意：上面的ClassComponent将innerRef附加到了input上，
      // 所以classComponentRef.current将是input的DOM节点。
      // 如果要获取ClassComponent的实例，ClassComponent需要将它自身的实例暴露出来，
      // 或者forwardRef直接返回ClassComponent本身（不推荐，通常用于DOM节点）。

      // 为了演示获取类组件实例，我们需要稍微修改ClassComponent和forwardRef的用法：
      // ClassComponent的render方法不将ref附加到DOM，而是forwardRef直接返回ClassComponent
      // 如下面的修正：
    }
  }, []);

  const handleFocus = () => {
    if (classComponentRef.current) {
      // 假设ClassComponent内部有一个方法可以触发焦点
      // 如果ref指向DOM节点，可以直接调用focus()
      classComponentRef.current.focus();
    }
  };

  return (
    <div>
      <h3>Ref转发到类组件内部的DOM节点</h3>
      <Input ref={classComponentRef} value="Hello" onChange={() => {}} />
      <button onClick={handleFocus}>聚焦输入框</button>
      <p>
        在这种情况下，<code>classComponentRef.current</code> 将指向 <code>ClassComponent</code> 内部的 <code><input></code> DOM节点。
      </p>
    </div>
  );
}

// 修正：如果Ref要指向类组件实例，而不是其内部DOM，
// forwardRef的第二个参数（ref）不应直接传递给内部DOM元素。
// 而是ClassComponent本身需要被包装，并且ref指向ClassComponent的实例。
// 然而，React推荐Ref转发的最终目标是DOM节点。
// 如果确实需要访问类组件实例，通常直接将ref附加到类组件上即可，
// 但这不涉及forwardRef。forwardRef主要是为了将ref“穿透”一个组件。

// 重新理解原文档的意图：
// "Ref forwarding is not limited to DOM components. You can forward refs to class component instances, too."
// 这句话的重点在于，通过forwardRef，你可以将ref传递给一个子组件，
// 这个子组件可以是最终渲染DOM的组件（如FancyButton），
// 也可以是另一个自定义的类组件。当ref最终到达一个类组件时，
// 如果你将这个ref直接附加到该类组件的*实例*上（而不是它内部的DOM），
// 那么这个ref就会指向该类组件的实例。
// 但通常，forwardRef的目的是为了访问子组件内部的DOM节点。

// 让我们用一个更清晰的例子来演示如果ref直接指向类组件实例：
class ChildClassComponent extends React.Component {
  sayHello() {
    console.log('Hello from ChildClassComponent instance!');
  }
  render() {
    return <p>我是子类组件</p>;
  }
}

// 如果一个父组件直接使用ChildClassComponent，ref会指向其实例
function ParentWithClassInstanceRef() {
  const childRef = useRef(null);

  useEffect(() => {
    if (childRef.current) {
      console.log('Ref指向类组件实例:', childRef.current);
      childRef.current.sayHello(); // 调用实例方法
    }
  }, []);

  return <ChildClassComponent ref={childRef} />;
}

// forwardRef的场景通常是：父组件 -> 函数组件 (forwardRef) -> 类组件 (被包装) -> DOM
// 例如：
const ForwardedClassComponentWrapper = React.forwardRef((props, ref) => {
  // ref在这里会指向ClassComponent的实例
  return <ClassComponent {...props} innerRef={ref} />; // 这里innerRef仍然指向DOM
  // 如果要让ref指向ClassComponent实例，ClassComponent本身不应该有innerRef，
  // 而是forwardRef直接返回ClassComponent，但这不符合forwardRef的典型用法。

  // 更准确的理解是：
  // forwardRef可以把ref传递给一个子组件，这个子组件可以是函数组件，也可以是类组件。
  // 如果子组件是类组件，并且你把ref直接附加到这个类组件上（而不是它的内部DOM），
  // 那么ref就会指向这个类组件的实例。

  // 让我们调整ClassComponent的示例，使其Ref真正指向类组件实例
});

// 最终示例：Ref转发到类组件内部的DOM元素
// 这是最常见且推荐的forwardRef用法
function TutorialApp() {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      console.log('通过Ref转发获取到输入框DOM节点:', inputRef.current);
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <h2>Ref转发到类组件内部的DOM元素</h2>
      <p>
        通过 <code>React.forwardRef</code>，我们可以将父组件的 Ref 传递给一个中间组件（这里是 <code>InputWrapper</code>），
        然后由这个中间组件将 Ref 进一步传递给其内部的类组件 <code>ClassComponent</code>，
        最终 <code>ClassComponent</code> 将这个 Ref 附加到它所渲染的 <code><input></code> DOM 元素上。
        这样，父组件的 Ref 就可以直接访问到最深层的 DOM 节点。
      </p>
      <Input ref={inputRef} value="Hello World" onChange={() => {}} />
      <button onClick={() => inputRef.current && inputRef.current.select()}>
        选中输入框内容
      </button>
    </div>
  );
}

export default TutorialApp;