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

import React, { useRef, useEffect } from 'react';// 假设我们有一个FancyButton组件，它是一个函数组件const FancyButton = React.forwardRef((props, ref) => (      {props.children}  ));function ParentComponent() {  const buttonRef = useRef(null);  useEffect(() => {    if (buttonRef.current) {      console.log('FancyButton内部的DOM节点:', buttonRef.current);      buttonRef.current.focus();    }  }, []);  return (          提交      );}

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 (          );  }}// 使用React.forwardRef将ref转发到ClassComponentconst Input = React.forwardRef(function (props, ref) {  // 注意：这里将父组件传递的ref作为props（innerRef）传递给ClassComponent  // 这样ClassComponent就可以将这个ref附加到它内部的DOM元素上  return ;});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 (    
      
Ref转发到类组件内部的DOM节点
       {}} />      聚焦输入框      
        在这种情况下，classComponentRef.current 将指向 ClassComponent 内部的  DOM节点。      
    
  );}// 修正：如果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 
我是子类组件
;  }}// 如果一个父组件直接使用ChildClassComponent，ref会指向其实例function ParentWithClassInstanceRef() {  const childRef = useRef(null);  useEffect(() => {    if (childRef.current) {      console.log('Ref指向类组件实例:', childRef.current);      childRef.current.sayHello(); // 调用实例方法    }  }, []);  return ;}// forwardRef的场景通常是：父组件 -> 函数组件 (forwardRef) -> 类组件 (被包装) -> DOM// 例如：const ForwardedClassComponentWrapper = React.forwardRef((props, ref) => {  // ref在这里会指向ClassComponent的实例  return ; // 这里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 (    
      
Ref转发到类组件内部的DOM元素
      
        通过 React.forwardRef，我们可以将父组件的 Ref 传递给一个中间组件（这里是 InputWrapper），        然后由这个中间组件将 Ref 进一步传递给其内部的类组件 ClassComponent，        最终 ClassComponent 将这个 Ref 附加到它所渲染的  DOM 元素上。        这样，父组件的 Ref 就可以直接访问到最深层的 DOM 节点。      
       {}} />       inputRef.current && inputRef.current.select()}>        选中输入框内容          
  );}export default TutorialApp;