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

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

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={() => {}} />;
}

// 改进后的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={() => {}} />;
}